网页前端之CSS学习记录总结篇

标签：

块级标签block：div, p, h1-h6, ul, ol，li, dl, dt, dd，table,tr等，独占一行，可以设置宽高，默认是父标签的100%；
行内标签inline：a，span ,strong,i,u,em等，在一行内显示，不可以设置宽高，默认是字体的大小；
p标签自带边距margin 16px；body是8px;
display将标签转化为行内或者块级标签；
行内块标签inline-block:在一行显示，可以设置宽高，如input，image,textarea，td标签
在网页中，行内转块和行内块是非常实用的；
块级标签可以嵌套其他的，如div包罗万象，但是P标签尽量不要去嵌套div，浏览器渲染会将两标签独立；
行内标签不要嵌套块级标签，可以嵌套行内块标签，如a标签嵌套img标签；
当行高line-height等于高度height时，文本会垂直居中（上下padding要相同）；
text-align:center 水平居中
text-decoration:none 无文本装饰,去除a标签的下划线，underline 下划线，overline上划线，linethrough删除线
del也是删除线；
a标签要嵌套img则应将a转化为行内块；

高级选择器：
子代选择器 #id>box{};只限于儿子们
后代选择器 #id box{}; div div p{} ; div p .class_name{} ;
交集选择器 div.active{} 没空格哦，选择的是类名为active的div，不是其他的div，
并集（组合）选择器 p,yl,ol,body{margin:0;padding:0},即重置样式；
兄弟选择器 h1+p{} h1下面的紧挨着h1的p标签，也可组合使用 #test>h1+p{}
伪类选择器
属性选择器 a[title]{font-size:30px;}，选择了所有具有title属性的a元素，并将字体大小设置为30px；
a[title="lyf"]{color:Red;}选择title值为lyf的a元素，并将字体颜色设置为红色；

css基础选择器：
#id{}：id选择器，id唯一
.类名{}：类选择器，可以重复类名，类名也可由多个名称中间加空格组成
标签{}：标签选择器，比如a标签去下划线
尽可能的用class，除非极特殊的情况可以用id，class属性交给css使用，id属性交给js使用。

盒子模型：

padding的值如果是两个，则表示上下，左右，三个表示上，左右，下，四个表示上右下左，顺时针方向;width和heigth是指内容的宽度和高度；margin:外边距padding 就是内容与边框的空隙。而margin则是模块与模块的空隙

,一个盒子模型的实际宽度为：左右margin+左右border+左右padding+内容宽度width；

子盒子水平居中：
子盒子是有宽度的，则子盒子直接设置margin :0 auto可居中；span可先转为块或行内块，再设置宽，再margin :0 auto；
父盒子设置text-align:center,子盒子span直接居中,子盒子div转为行内块或者行内后可居中；
子绝父相来调节子盒子偏移量水平居中；
父盒子设置display: flex;justify-content: center;可实现子盒子居中。
子盒子垂直居中：
子绝父相来调节子盒子偏移量垂直居中；
父盒子设置display: flex;align-items: center;
子盒子水平垂直居中：
父盒子设置display:flex;子盒子设置margin：auto；可实现水平垂直居中。

a标签有4种伪类（即对应四种状态），如下：

:link “链接”：超链接点击之前
:visited “访问过的”：链接被访问过之后,不一定是本页面访问过，之前访问过，留在缓存里的都认为是访问过
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类名称对大小写不敏感。

a{}和a:link{}的区别：
a{}定义的样式针对所有的超链接(包括锚点)。
a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)。
如果同时需要，我们一定要将a标签写在前面，将:link、:visited、:hover、:active这些伪类写在后面。

伪类：

:focus伪类是某个标签获得焦点时的样式（比如某个输入框获得焦点）;
:first-child 伪类：可以使用 :first-child 伪类来选择元素的第一个子元素。
p:first-child {color: red;} 选择器匹配任何元素的子元素中的第一个p 元素；
p > i:first-child {font-weight:bold;} 选择器匹配所有 <p> 元素中的第一个 <i> 元素；
p:first-child i {color:blue;} 选择器匹配任何元素的子元素中的第一个p 元素下的所有 <i> 元素；

伪元素：
::first-line 伪元素用于向文本的首行设置特殊样式。只能用于块级元素。
p:first-line{color:#ff0000;font-variant:small-caps;}
::first-letter 伪元素用于向文本的首字母设置特殊样式：
p.article:first-letter{color: #FF0000;}
:before伪元素可以在元素的内容前面插入新内容:
h1:before{content:url(logo.gif);}
:after伪元素可以在元素的内容之后插入新内容。

display：none隐藏标签不占位置，visibility:hidden占位置；

文本缩进：text-indent:2em;

盒子边框border：
border: 3px solid blue；
border-width:3px 5px 7px 9px; 盒子各边宽度，顺时针
border-style:solid dotted dashed double; 实线，点线，虚线，双线
border-color:blue;
border-top:1px solid #000;

什么是浮动float？
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
浮动可以使得元素按指定方向排列，直到遇到父元素的边界或另一个浮动元素停止。

浮动的特性有哪些？
1.脱标；2.贴边；3.字围；4.收缩；5.浮动后不区分行内、块状元素，都能够设置宽高。
所谓收缩：一个浮动元素如果没有设置width，那么自动收缩为文字的宽度（这点和行内元素很像）。

浮动所带来的问题：

浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要清除浮动元素，使其包含框表现出正常的高度。

清除浮动的方式：

父盒子设置固定高度 ：应用：网页中盒子固定高度区域，比如固定的导航栏。缺点：使用不灵活，后期不易维护

内墙法：  在浮动元素的后面加一个空的块级元素 ，缺点：结构冗余

伪元素清除法：内墙法的升级，避免冗余的块级元素出现，在需要清除浮动的盒子里添加类的值clearfix即可。


.clearfix:after{
    content:'';
    display: block;
    clear: both;
}

overflow:hidden：

当一个元素设置了overflow:hidden|auto|scroll属性之后，它会形成一个BFC（Block Formatting Context）区域，叫做块级格式化上下文。BFC只是一个规则。它对浮动定位都很重要。浮动定位和清除浮动只会应用于同一个BFC的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。

总结：只要我们让父盒子形成BFC的区域，那么它就会清除区域中浮动元素带来的影响。

但是当我们对浮动元素的父盒子设置了overflow：hidden之后，确实能够使得父盒子有了高度，即最大的浮动元素高度，然而浮动元素的内容若超出了最大高度时就会被隐藏哦！也需谨慎使用！

BFC布局规则：

1.内部的Box会在垂直方向，一个接一个地放置。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

4.BFC的区域不会与float 元素重叠。

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6.计算BFC的高度时，浮动元素也参与计算

相对定位position：relative：

如果没有定位偏移量，对元素本身没有任何影响；

不使元素脱离文档流；

偏移后会覆盖其他元素，但是原来的坑还占着。

绝对定位position: absolute：

脱离文档流；

使得行内元素能设置宽高(让行内具备块特性)；

使得块元素默认宽根据内容决定(让块具备行内特性)；

如果前辈元素没有relative，absolute,fix中的任一个,则定位基准为body；

如果前辈元素有relative，absolute,fix中的任一个,则定位基准为最靠近自身的那个拥有定位的前辈元素。

应用较多的为“子绝父相”，子元素为absolute，父元素为relative。

固定定位：

它跟绝对定位基本相似，只有一个主要区别：绝对定位固定元素是相对于html根元素或其最近的定位祖先元素，而固定定位固定元素则是相对于浏览器视口本身。这意味着你可以创建固定的有用的网页效果，比如固定导航栏、回到顶部按钮，小广告等。

z-index:

当元素出现压盖时，是什么决定哪些元素出现在其他元素的上面呢？是z-index.使用z-index有以下几个规则：

1. z-index只应用在定位的元素，默认z-index:auto;
2. z-index取值为整数，数值越大，它的层级越高
3. 如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。
4. 从父现象。通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。

border-radius：

border-radius:15px 同时将每个圆角的“水平半径”（hrizontal radius）和“垂直半径”(vertical radius)都设置为15px;

border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

border-radius还可以用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值表示垂直半径。第二组值也可以设置1到4个值，应用规则与第二组值相同。

border-radius:10px 20px 30px / 40px 50px;

box-shadow 阴影  :


box-shadow:3px 3px 20px red inset 表示水平竖直方向为3px，模糊距离为20px,阴影颜色为红，内阴影。有时盒子弄个阴影还挺好看的。我的这个博客页面就有很多阴影。

未完待续...