CSS基础笔记

目录

简介

注释

CSS代码插入方法

选择器

字体

文本

长度值

元素分类

盒子模型

css布局模型

弹性盒模型之flex属性

简介

CSS全称为“层叠样式表 (Cascading Style Sheets)”
样式定义如何显示 HTML 元素
样式通常存储在样式表中，CSS文件
解决内容与表现分离的问题
外部样式表可以极大提高工作效率

注释

/*注释内容*/

CSS代码插入方法
从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式 三种。

内联式css样式，就是把css代码直接写在现有的HTML标签中，如下面代码：

<p style="color:red;font-size:12px">这里文字是红色。</p>

嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间，并且一般情况下嵌入式css样式写在<head></head>之间

<style type="text/css">
span{
color:red;
}
</style>

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

<link href="base.css" rel="stylesheet" type="text/css" />

优先级：内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。
总结来说，就是就近原则（离被设置元素越近优先级别越高）。

选择器

CSS 语法

标签选择器

p{font-size:12px;line-height:1.6em;}

类选择器

.center {text-align: center}

其中类选器名称可以任意起名（但不要起中文噢）

id选择器

#red {color:red;}

注意：id 属性只能在每个 HTML 文档中出现一次,并且仅有一个。

<p id="red">这个段落是红色。</p>
<span class="stress bigsize">三年级</span>

子选择器
即大于符号(>),用于选择指定标签元素的第一代子元素。

.food>li{border:1px solid red;}

后代选择器
后代选择器作用于所有子后代元素

.first  span{color:red;}

通用选择器
html中所有标签元素

* {color:red;}

伪类选择器

a:hover{color:red;}

a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */

hover最常用，可以兼容所有浏览器

分组选择器

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

继承及其问题
根据 CSS，子元素从父元素继承属性。
选择器的优先级

选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

权值计算-特殊性
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
有些特殊的情况需要为某些样式设置具有最高权值，

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

注意：!important要写在分号的前面

字体

p
  {
  font-family: "Times New Roman",Georgia,Serif;
  /* 如果浏览器不支持第一个字体，则会尝试下一个*/
  font-size: 12px;  
  font-weight:bold;
 /*
  normal    默认值。定义标准的字符。
  bold  定义粗体字符。
  bolder    定义更粗的字符。
  lighter   定义更细的字符。
  inherit   规定应该从父元素继承字体的粗细。*/
  font-style:normal;
  /* 
  normal    默认值。浏览器显示一个标准的字体样式。
  italic    浏览器会显示一个斜体的字体样式。
  oblique   浏览器会显示一个倾斜的字体样式。
  inherit   规定应该从父元素继承字体样式。*/
  color:red;
  /*
  color:rgb(133,45,200);
  color:rgb(20%,33%,25%);
  p{color:#00ffff;*/
  line-height:1.5em; /*行间距*/
  font:italic  bold  12px/1.5em  "宋体",sans-serif;
  /*简写
  1.使用这一简写方式你至少要指定 font-size 和 font-family 属性，
其他的属 性(如 font-weight、font-style、font-variant、line-height)
如未指定将自动 使用默认值。
 2.在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
 3.常用
  body{
    font:12px/1.5em  "宋体",sans-serif;
  }*/
  }

文本

p {

  text-indent: 5em;
/*缩进文本，可为负数*/
  padding-left: 5em;
/*果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界*/
text-indent: 20%;
/*将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。*/
text-decoration:underline;
/*
none    默认。定义标准的文本。
underline   定义文本下的一条线。
overline    定义文本上的一条线。
line-through    定义穿过文本下的一条线。
blink   定义闪烁的文本。
*/
line-height:90%;/*行高*/
word-spacing:25px;/*字/单词间距*/
letter-spacing:25px;/*字母间距*/
text-align:center;
/*
left    把文本排列到左边。默认值：由浏览器决定。
right   把文本排列到右边。
center  把文本排列到中间。
justify 实现两端对齐文本效果。*/
white-space: normal;
/*
normal  默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap  文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap    保留空白符序列，但是正常地进行换行。
pre-line    合并空白符序列，但是保留换行符。*/
direction: rtl;
/*
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。*/
text-transform:uppercase;
/*
none    默认。定义带有小写字母和大写字母的标准的文本。
capitalize  文本中的每个单词以大写字母开头。
uppercase   定义仅有大写字母。
lowercase   定义无大写字母，仅有小写字母。*/
}

长度值

像素px
相对单位，指的是显示器上的小点，目前大多数的设计者都倾向于使用像素（px）作为单位。
em
给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；
百分比%

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

元素分类

常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：
<a>、<span>、< br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：
<img>、<input>

设置display:block可以将元素显示为块级元素。

a{display:block;}

块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

通过代码display:inline将元素设置为内联元素。

 div{display:inline;}
......
<div>我要变成内联元素</div>

内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

none设置此元素不会被显示，当想要元素隐藏的时候可以使用此值。

 div{display:none;}

盒子模型

CSS 框模型

提示：背景应用于由内容和内边距、边框组成的区域。

内边距padding

padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px

padding:10px 5px 15px;
上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px

padding:10px 5px;
上内边距和下内边距是 10px
右内边距和左内边距是 5px

padding:10px;
所有 4 个内边距都是 10px

外边距margin
类似padding
背景

div{background-color:red;}//为块状元素设置
a{background-color:green;}//为行内元素设置

边框 border

div{ border:2px  solid  red;}
div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}
注意：
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用像素（px）。

div{
  border-bottom:1px solid red;
  border-top:1px solid red;
  border-right:1px solid red; 
  border-left:1px solid red;

div{border-radius: 20px 10px 15px 30px;}  //设置圆角
div{
    border-top-left-radius: 20px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 15px;
   border-bottom-left-radius: 30px;
}
div{ border-radius:10px 20px;}
//左上角和右下角圆角效果一样为10px，右上角和左下角圆角一样为20px
}

css布局模型

流动模型（Flow）
流动（Flow）是默认的网页布局模式

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

浮动模型 (Float)
设置元素浮动 float:left;就可以实现两个块状元素并排显示
层模型（Layer）
1、绝对定位(position: absolute)

作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

2、相对定位(position: relative)

通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动(以前的位置依旧占据)。

3、固定定位(position: fixed)

与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。
与background-attachment:fixed;属性功能相同。

相对于其它元素进行定位

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
参照定位的元素必须加入position:relative;
#box1{
    width:200px;
    height:200px;
    position:relative;        
}
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

弹性盒模型

display: flex
在父容器中添加flex。

1、设置display: flex属性可以把块级元素在一排显示。
2、flex需要添加在父元素上，改变子元素的排列顺序。
3、默认为从左往右依次排列,且和父元素左边没有间隙。

justify-content设置横轴排列方式
本属性定义了项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start：交叉轴的起点对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

 .box {
        background: blue;
        display: flex;
        justify-content: flex-start;
    }

align-items设置纵轴排列方式

align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：默认值，左对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

   .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-start;
    }

flex
1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后,其宽度属性会失效。

CSS小技巧

水平居中设置

1、行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
2、定宽块状元素
通过设置“左右margin”值为“auto”来实现居中的。

面试常考题之已知宽高实现盒子水平垂直居中

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。效果：

3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。

面试常考题之宽高不定实现盒子水平垂直居中
通常使用定位以及translate完成

 .box {
        border: 1px solid #00ee00;
        height: 300px;
        position: relative;

    }

    .box1 {
        border: 1px solid red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性
2、子元素设置上和左偏移的值都为50%。
3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。