html概念总结

概念:当概念发生冲突时,用户代理需要确定样式声明的最终值,既要考虑样式的来源又要考虑样式的特殊声明,优先级,先后顺序

当一个标签被相同的选择器选择到的时候,相同的样式会发生层叠,遵循就近原则

总结:

css的层叠性是通过继承性和优先级实现

1.样式声明不冲突

• 同时应用于元素

2.样式声明冲突

• 同级选择器,css样式中最后定义的声明应用于元素(就近原则)

• 不同级选择器,由选择器优先级决定

2.css长度单位

• px像素

  相对于显示器的屏幕分辨率

  值是固定的

  计算比较容易

• em

  • 相对长度单位,相当于父元素的font-size属性值而言

  • 值不固定

  • 浏览器默认字号16px,未经调整的浏览器都符合:1em=16px

• rem

  • 相对长度单位,相对于根元素的font-size属性值而言

  • 值不固定

  • 浏览器默认字号16px,未经调整的浏览器都符合:1rem=16px

  • 是css新增单位,ie8及更早版本浏览器中不兼容

• %百分比

  • 相对长度单位

  • 相对父元素来说

  3.图片居中

  方法一:父元素

  text-align:center

  方法二:图片

  display:block ;margin:0 auto;

  4.css浮动

  概述:网页中有很多布局效果,标准流没有办法完成,使用可以利用浮动改变元素默认的排列方式

浮动的概念

可以使元素脱离文档流,按照指定方向排列,直到遇到父元素的边界或另一个浮动元素停止

标准流(普通文档流)

文档中可以显示的对象在排列时所占的位置,实际上就是一个网页标签正常从上到下,从左到右的排列

float:left      左浮动
float:right      右浮动
float:none       不浮动
​
​
浮动特性:
1.浮动元素脱离正常标准不脱离文本流
2.浮动元素不占位,父级盒高度为零
3.如果浮动元素的宽度之和大于父元素,则浮动盒会被挤到下一行
4.使行级标签支持宽高
5.提升层级
​
​

浮动产生的问题(为什么要清浮动)

• 子元素浮动会脱离正常标准流,会导致父元素高度塌陷(背景,边框无法正常显示)

• 影响之后元素的布局

清浮动的方法

1.给浮动的父级盒子设置一个固定的高度
   优缺点:不够灵活,适用于高度固定的布局中
​
2.为浮动的父级盒子设置浮动
     优缺点:会产生新的浮动问题
     
3.为浮动元素的父盒子添加overflow属性;属性值可以为hidden, scroll,auto
      优缺点:可能会隐藏内容或触发不需要的的滚动条;代码简洁
      
 4.在浮动元素之后,与浮动元素呈并列关系的位置,加一个不浮动元素(空的div标签)div本身不浮动,没有尺寸,在空的div标签上加上属性:clear:both
      优缺点:代码冗余,通俗易懂,书写方便
      
      clear:left  清除左侧浮动
      clear:right  清除右浮动
      clear:both   清除两侧浮动
​
5.用伪元素清除浮动,给浮动元素的父级盒加类名.clearfix,并在.clearfix中添加样式
      .clearfix::after{
                 content:'';
                 display:block;
                 clear:both;
            }
            优缺点：不会再结构上产生冗余代码，可以重复使用，结构语义化正确

1）什么是伪元素

用css语言创造出来的标签

伪元素创造的标签是行级标签

2）如何创建伪元素

• element::before{ content:"伪元素的文本内容"; 属性名: 属性值; } element元素内部，内容之前，添加“伪元素的文本内容”

• element::after{ content:"伪元素的文本内容"; 属性名: 属性值; } element元素内部，内容之后，添加“伪元素