CSS三大属性

层叠性、继承性、优先级

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：

  • 样式冲突，遵循的原则是就近原则，哪个样式离结构近就执行哪个样式。
  • 样式不冲突不会层叠。

继承性

CSS中的继承：子标签会继承父标签某些样式，如文本颜色和字号。简单理解就是子承父业。

  • 恰当地使用继承性可以简化代码，降低CSS样式的复杂性。
  • 子元素可以继承父元素的某些样式，如（text-，font-，line-以及color属性）

主动继承&被动继承：

  • 被动继承
    • 无需设置，自动拥有父标签的样式。
  • 被动继承
    • 设置样式为inherit，自动继承父元素的样式

*行高的继承性
font: 14px/1.5 red ‘Microsoft Yahei’

  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高为1.5
  • 此时子元素的行高是：当前子元素的文字大小*1.5
  • body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

当同一个元素制定多个选择器，就会有优先级的产生

  • 选择器相同，则执行层叠性
  • 选择器不同，则按选择器权重执行

选择器权重如下：

选择器 选择器权重
继承 或者 * 0,0,0,0
元素选择器 0,0,0,1
类选择器或伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 “style” 1,0,0,0
!important 重要的 无穷大

*注意：继承的权重是0
例子：

  1. <head>
  2.     <style>
  3.         #father {
  4.             color: #red;
  5.         }
  6. /* p继承的权重为0，所以p标签内的文字最终还是粉色 */
  7.         p {
  8.             color: pink;
  9.         }
  10.     </style>
  12. </head>
  14. <body>
  15.     <div id="father">
  16.         <p>我其实还是粉色</p>
  17.     </div>
  18. </body>

权重叠加
如果是复合选择器，则会有权重叠加，需要计算权重；
权重虽然会有叠加，但永远不会进位；

盒子模型

盒子模型组成部分
它包括：border边框 content：内容 padding：内边距 margin：外边距

边框border

border可以设置元素的边框，边框由3部分组成：粗细，样式，颜色
border: border-width || border-style || border-color

属性 作用
border-width 定义边框粗细，单位px
border-style 边框的样式
border-color 边框的颜色

边框的复合写法
border: 1px solid red;
注意：边框会影响盒子的实际大小

内边距padding

padding定义元素的内边距
padding: 5px 10px 20px 40px;

padding属性（简写属性）可以有1到4个值

值的个数 表达意思
padding: 5px 1个值，代表上下左右内边距都是5像素
padding: 5px 10px 2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px 3个值，代表上边距是5像素，左右边距是10像素，下边距是20像素
padding: 5px 10px 20px 40px 4个值，代表上边距是5像素，右边距是10像素，下边距是20像素，左边距是40像素（顺时针）

注意，padding会影响盒子的实际大小，解决办法，减去padding内边距得出实际盒子大小。
如果盒子本身没有指定width/height的属性，则此时的padding不会撑开盒子大小。

外边距margin

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
margin 简写方法方式表达的意义与padding完全一致。

margin 可以让块级元素水平居中，但必须满足2个条件：
1.盒子必须指定宽度（width）；
2.盒子左右的值都为auto。
常见的三种写法如下：
margin-left: auto;
margin: auto;
margin: 0 auto;/上下边距为0，左右水平居中/
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-aliqn:center即可。

外边距合并-嵌套元素塌陷
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
①可以为父元素定义上边框。
②可以为父元素定义上内边距。
③可以为父元素添加overflow:hidden。
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题。

清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

  1.   /*清除内外边距语法*/
  2.   * {
  3.      margin: 0;
  4.      padding: 0;
  5.         }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

圆角矩形

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角。
语法：
border-radius:length；
radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果

盒子阴影

box-shadow可以给盒子添加盒子阴影。

值 描述
h-shadow 必须，水平阴影的位置，允许负值。
v-shadow 必须，垂直平阴影的位置，允许负值。
blur 可选，模糊距离。
spread 可选，阴影的尺寸。
color 可选，阴影的颜色。
inset 可选，将外部阴影（outset）改为内部阴影。

注意：
1.默认的是外阴影(outset)，但是不可以写这个单词，否则导致阴影无效。
2.盒子阴影不占用空间，不会影响其他盒子排列。

文字阴影

text-shadow可以给文本添加阴影。

值 描述
h-shadow 必须，水平阴影的位置，允许负值。
v-shadow 必须，垂直平阴影的位置，允许负值。
blur 可选，模糊距离。
color 可选，阴影的颜色。

浮动

标准流（文档流）

所谓的标准流：就是标签按照规定好默认方式排列。
1，块级元素独占一行，从上向下顺序排列；

  • 常用元素：div，hr，h1～6，p，ul，ol，dl，form，table；

2，行内元素会按照顺序，从左往右顺序排列，碰到父级元素边缘则自动换行。

  • 常用元素：span，a，i，em等

浮动流

网页布局第一 准则：多个块级元素纵向排列找标准流，多个块级元索横向排列找浮动。
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：
选择器 {float: 属性值;}

值 描述
none 元素不浮动（默认值）
left 元素向左浮动
right 元素向右浮动

浮动特性
1.浮动元素会脱离标准流(脱标)

  • 脱离标准普通流的控制(浮)移动到指定位置(动)，(俗称脱标)
  • 浮动的盒子不再保留原先的位置

2.浮动的元素会—行内显示并且元素顶部对齐

  • 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
  • 注意：浮动的元素是互相贴靠在一起的(不会有缝隙) , 如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

3.浮动的元素会具有行内块元素的特性
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

  • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定；
  • 浮动的盒子中间是没有缝隙的，是紧密着一起的；
  • 行内元素同理。

如果行内元素设置了浮动，则不需要转换为块级元素或行内块元素就可以设置宽高。

清除浮动

预防：
选择器 {clear: 属性值}

属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两则浮动的影响

我们实际工作中，几乎只用clear: both；
清除浮动的策略是：闭合浮动

1.额外标签法也称为隔墙法，是W3C推荐的做法。
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素

方法一：额外标签法也称为隔墙法，是W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如

，或者其他标签(如
等)。

  • 优点: 通俗易懂，书写方便
  • 缺点: 添加许多无意义的标签，结构化较差

注意：这个新增的盒子要求必须是块级元素不能是行内元素

方法二：添加overflow属性
可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

方法三：:after伪元素
：after 方式是额外标签法的升级版。也是给父元素添加

  1.         .clearfix:after {
  2.             content: "";
  3.             display: block;
  4.             height: 0;
  5.             clear: both;
  6.             visibility: hidden;
  7.         }
  9.         .clearfix {
  10.             /* IE 6,7 专有 */
  11.             *zoom: 1;
  12.         }
  • 优点：没有增加标签，结构更简单
  • 缺点：照顾低版本浏览器

方法四：双伪元素清除浮动
：before : after方式。也是给父元素添加

  1.         .clearfix:before,
  2.         .clearfix:after {
  3.             content: "";
  4.             display: table;  |转换为块级元素并且在一行显示|
  5.         }
  7.         .clearfix:after {
  8.             clear: both;
  9.         }
  11.         .clearfix {
  12.             /* IE 6,7 专有 */
  13.             *zoom: 1;
  14.         }

CSS书写顺序

建议遵从以下顺序：
1.布局定位属性：display/position/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)
2.自身属性：width/height/margin/padding/border/background
3.文本属性：color/font/text-decoration/text-align/verdical-align/white-space/break-word
4.其他属性(CSS3)：content/cursor/border-radius/box-shadow/background:linear-gradient…

为了提高网页制作的效率，布局时通常有以下的整体思路：
1.必须确定页面的版心（可视区），我们测量可得知。
2.分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则。
3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则。
4.制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
5.所以，先理清楚布局结构，再写代码尤为重要，这需要我们多写多积累。

定位

定位的组成

定位：将盒子定在某一个位置，所以定位也是在摆盒子，按照定位的方式移动盒子；
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。

1.定位模式
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

值 语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

2.边偏移
边偏移就是定位的盒子移动到最终位置，有top，bottom，left和right 4个属性。

属性 示例 描述
top top: 80px 顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom bottom: 80px 底部偏移量，定义元素相对于其父元素下边线的距离。
left left: 80px 左侧偏移量，定义元素相对于其父元素左边线的距离。
right right: 80px 右侧偏移量，定义元素相对于其父元素右边线的距离。

静态定位

静态定位是元素的默认定位方式，无定位的意思。
语法：
选择器 {position:static;}

  • 静态定位按照标准流特性摆放位置，它没有边偏移
  • 静态定位在布局时很少用到

相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。
语法：
选择器 {position: relative;}
相对定位的特点：（务必记住）

  • 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
  • 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）
  • 因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的(拼爹型)。
选择器 { position: absolute;}
特点：
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位( Document文档)。
2.如果祖先元素有定位(相对、绝对、固定定位) , 则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置。( 脱标)

子绝父相

这个”子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式，这句话的意思是：子级是绝对定位的话，父级要用相对定位。
①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示。
③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
固定定位的特点: (务必记住)
选择器 { position: fixed;}
1.以浏览器的可视窗口为参照点移动元素。

  • 跟父元索没有任何关系
  • 不随滚动条滚动。
  1. 固定定位不再占有原先的位置。
    固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

如何固定到版心右侧？
1.让固定定位的盒子left：50%.走到浏览器可视区（也可以看做版心）的一半位置。
2.让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

粘性定位

粘性定位可以看作是固定定位和相对定位的结合。
Sticky的语法：
选择器 { position: sticky; top: 10px;}
粘性定位的特点：
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用，兼容性差，IE不支持。

定位的叠放顺序

在使用定位布局时，可能会出现盒子重叠的情况。
此时，可以使用z-index来控制盒子的前后次序（z轴）语法：
选择器 { z-index: 1；}

  • 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
  • 如果属性值相同，则按照书写顺序，后来居上，数字后面不能加单位
  • 只有定位的盒子才有z-index属性

定位的拓展

1.绝对定位的盒子居中

加了绝对定位的盒子不能通过margin: 0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。
①left: 50%; :让盒子的左侧移动到父级元素的水平中心位置。
②margin-left: - 100px; :让盒子向左移动自身宽度的一半。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="../Web/css/style.css">
  9.     <style>
  10.         .box {
  11.             position: absolute;
  12.             left: 50%;
  13.             top: 50%;
  14.             width: 200px;
  15.             height: 200px;
  16.             background-color: #555;
  17.             margin-top: -100px;
  18.             margin-left: -100px;
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <!-- 绝对定位的盒子居中写法 -->
  25.     <div class="box"></div>
  26. </body>
  28. </html>

2.定位的特性

绝对定位和固定定位也和浮动类似。

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

3.脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元索的都不会触发外边距合并的问题。

4.绝对定位(固定定位)会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)
但是绝对定位(固定定位)会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会团绕浮动元素。

元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
本质：让一个元素在页面中隐藏或者显示出来。
1. display显示隐藏
2. visibility 显示隐藏
3. overflow 溢出显示隐藏

1.display属性

display属性用于设置一个元素应如何显示。

  • display.none ; 隐藏对象
  • display : block ; 除了转换为块级元素之外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置。
后面应用及其广泛，搭配JS可以做很多的网页特效。

2.visibility可见性

visibility属性用于指定一个元素应可见还是隐藏。

  • visibility : visible; 元素可视
  • visibility : hidden; 元素隐藏

visibility隐藏元素后，继续占有原来的位置。

3.overflow溢出

overflow属性指定了如果内容溢出一一个元素的框(超过其指定高度及宽度)时，会发生什么。
overflow溢出显示隐藏但是只是对于溢出的部分处理

属性 值
visible 不剪切内容也不添加滚动条
hidden 不显示超出对象尺寸的内容，超出部分隐藏掉。
scroll 不管超出内容与否，总显示滚动条。
auto 超出自动显示滚动条，不超出不显示滚动条。

一般情况下 ，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用oveflow:hidden因为它会隐藏多余的部分。