CSS基础之盒模型/BFC/浮动/定位/浏览器渲染页面流程/元素显示与隐藏

10. 盒子模型(content、padding、border、margin)

10.1 边框
  • 属性
    • border-width
    • border-style:none/solid实/dashed虚/dotted点
    • border-color
    • border-radius 圆角边框
  • 设置方式
    • 单个属性 border-style:solid;
    • 连写 border:1px solid #999;
    • border+上下左右分开设 border-top:1px solid #999
10.2 内边距padding
  • 三个值是上左右下
  • 用padding使得字数不确定的导航栏等边距
  • 如果body的直接子盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小(此时div继承body的width和height即浏览器的)
10.3 外边距margin

同padding

10.4 常见问题
  • 使块级盒子水平居中
    • 盒子必须指定了宽度(width)
    • 盒子左右的外边距设置auto
  • 表格的细线边框
    • 合并相邻的边框:border-collapse:collapse;
  • 标准盒子大小 = 内容 + 内边距 + 边框
  • 不会撑大盒子的特殊情况(块级元素)
    1. 如果子盒子没有设置宽度,此时宽度默认是父盒子的宽度
    2. 此时给子盒子设置左右的padding或者左右的border不会撑大子盒子p145
  • 清除默认内外边距
    • 常见的body有默认的margin
    • p有默认的上下的margin
    • ul有默认的上下的margin和padding-left
10.5 外边距塌陷与合并

垂直布局的块级元素的上下的margin才会有影响

  1. 外边距合并 上下的盒子,上面的设置margin-bottom,下面的设置margin-top,会合并成数值大的那个外边距,因为小的在大的区域里
    只给一个盒子设置外边距即可解决
  2. 外边距塌陷 嵌套的盒子,子元素设置margin-top会作用在父元素上,即导致父元素一起往下移动
    • 给父元素设置border-top:transparent或padding-top或在父元素中子元素之前加上内容(分隔父子元素的margin-top)
    • 给父元素设置overflow:hidden(父盒子形成BFC,BFC盒子本身与子元素之间不存在margin的塌陷现象)
    • 转换为行内块元素(行内块元素是BFC盒子)
    • 设置浮动(浮动的元素是BFC盒子)
  3. 行内元素的margin和padding生效的情况
  • 行内元素水平方向的margin和padding在布局中**有效
  • 行内元素垂直方向的margin和padding在布局中**无效
10.6 盒子阴影
  1. 盒子阴影
    box-shadow:h-shadow(必写,水平阴影的位置,允许负值)、v-shadow(必写,垂直阴影的位置,允许负值)、blur(模糊距离(虚实))、 spread(阴影尺寸)、color(阴影的颜色0,0,0,.3)、inset(将外部阴影outset改为内部);
  2. 文字阴影
    text-shadow:h-shadow(必写,水平阴影的位置,允许负值) 、v-shadow(必写,垂直阴影的位置,允许负值)、 blur(模糊距离(虚实)) 、color(阴影的颜色);

11. 浮动

11.0 传统网页布局的三种方式
  • 标准流
  • 浮动
  • 定位
11.1 标准流(文档/普通流)
  • 浏览器在渲染显示页面内容时默认采用的一套排版规则
    • 块级元素:从上往下、垂直布局、独占一行
    • 行内元素:从左往右、水平布局、一行多个,空间不够自动换行
11.2 浮动的作用
  • 早期的作用是实现图文环绕的布局(给图片加浮动)
  • 现在的作用是用于网页布局,让本该垂直布局的块级元素变成水平布局(且可以选择浮动的方向)
11.3 如何浮动

给元素加上:

  • float:left;
  • float:right;
11.4 浮动的特点
  • 脱离标准流,不占位置,被其他标准流占有(浮动元素比标准流高半个级别,会覆盖标准流中的元素)
  • 浮动元素按照上下顺序挨个浮动
  • 浮动元素会受到上面元素边界的影响,要浮一起浮(因为上面的块级元素独占一行),因此,浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
  • 任何元素都可以浮动,不管原来是什么,之后都具有行内块元素的特性
  • 浮动元素有特殊的显示效果
    • 一行可以显示多个(用于块级元素)
    • 可以设置宽高(用于行内元素)
  • 注意:浮动的元素不能通过对父元素设置text-align:center或对浮动元素本身设置margin:0 auto让浮动元素本身水平居中(因为浮动元素就是在让元素向左/右浮动,与之矛盾)
11.5 清除浮动
  1. 清除浮动的作用
  • 有些时候未知子元素的个数和高度,需要用子元素撑开父元素而不是去直接设置父元素的高度,当我们给子元素设置浮动时,因为浮动元素脱标的特性它的高度会变成0不占位置,从而父元素就不会被完整撑开
  • 还有布局时浮动的元素遮罩了其他元素,因此需要清除浮动,清除浮动实际是清除浮动产生的影响
  1. 清除浮动的方法
  • 直接给父元素设置高度(有不能固定父元素高度的情况)
  • 给父元素加overflow:hidden;(父元素就形成了BFC,BFC盒子默认包裹住内部子元素)
  • 额外标签法
    在父元素中添加一个块级标签,然后给添加的块级元素设置clear:both/left/right;(会让html结构变得复杂,于是有了伪元素方式的出现)
  • 单伪元素
    用伪元素代替额外标签
    .father一般写成.clearfix 这样需要清除浮动的元素只有加上这个类名就可以不用单独写啦
.father::after {
	content:'';
	/*伪元素默认是行内元素*/
	display:block;
	clear:both;
	/*补充代码,当content内容为“.”时在网页中不显示伪元素*/
	height:0;
	visibility:hidden;
}
  • 双伪元素
.clearfix::before ,
.clearfix::after {
	content:'';
	display:table; // 类似于table标签
}
.clearfix::after {
	clear:both
	}

双伪元素不仅适用于清除浮动,还可以解决外边距塌陷问题
因为给父元素添加相当于添加了伪元素然后把父元素和子元素的margin-top分隔开来了

11.6 display的几个属性

display:none/block 元素显示与隐藏
display:inline/inline-block/block 元素显示模式
display:flex/grid 特殊布局
display:table/inline-table/table-row/list-item

display属性 作用
table 元素会作为块级表格来显示,类似于table,表格前后带有换行符,配合table-cell使用可实现水平垂直居中
inline-table 外面时"内联盒子",里面是"table盒子"
table-row 元素会作为一个表格行显示,类似于tr
table-cell 元素会作为一个表格单元格显示,类似于td和th
list-item 为元素类容生成一个块型盒子,随后再生成一个列表型的行内盒;会把元素作为列表显示,要完全模仿列表的话,还需要加上list-style-position,list-style-type

12. BFC

12.1 引入
  1. Box是css布局的基本单位
    • Box是CSS布局的对象和基本单位,直观点来说,一个页面是由很多个Box组成的。元素的类型和display属性,决定了这个Box的类型。不同类型的Box,会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。
    • Box的类型
      • block-level box:
        display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
      • inline-level box:
        display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;
      • run-in box:
        css3中才有, 这儿先不讲了。
  2. Formatting context是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
  3. Block level的box会参与形成BFC:例如display值为block/ list-item/ table
  4. Inline level的box会参与形成IFC:比如 display值为inline/ inline-table/ inline-block
12.2 什么是BFC

块格式化上下文(block formatting context),是web页面的可视css渲染的一部分,一个BFC区域包含创建该上下文元素的所有子元素,但是不包括创建了新的BFC的子元素的内部元素,BFC是一块块独立的渲染区域,可以将BFC看成是元素的一种属性,拥有了这种属性的元素就会使他的子元素与世隔绝,不会影响到外部其他元素。
参考

12.3 创建BFC的方法
  • html根元素
  • 浮动元素是BFC盒子
  • 行内块元素是BFC盒子
  • overflow属性取值不为visible的所有情况,如:auto、hidden、scroll
  • 表格单元格:table-cell
  • 定位
  • 弹性布局 display:flex
12.4 BFC盒子常见特点
  • BFC盒子会默认包裹住内部子元素(标准流、浮动) => 清除浮动
  • BFC盒子本身与子元素之间不存在margin的塌陷现象 => 解决外边距塌陷

13. 定位

13.1 为什么要用定位
  • 以下的情况不能用标准流和浮动实现:
    • 某个元素可以自由地在一个盒子内移动,且能压住其他盒子(层叠)
    • 当我们滚动窗口时,盒子是固定在屏幕某个位置或自由移动(固定)
  • 浮动和定位的使用区别:
    • 浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子
    • 定位则是可以让盒子*自由**某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子(层叠)
13.2 定位的组成

定位是将盒子在某个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子

  • 定位 = 定位模式 + 边偏移(top/bottom/left/right)
    1. 定位模式
      由CSS的position属性来设置,常见的值有四种:
      • static 静态定位
      • relative 相对定位
      • absolute 绝对定位
      • fixed 固定定位
    2. 边偏移
      边偏移就是定位的盒子移动到最终位置,有top、bottom、left和right四种属性
      如:top:80px;//盒子距离顶部80px
13.3 定位的类型
  1. 静态定位static(默认,就是无定位,标准流)
选择器 {
	position:static;
}
  • 静态定位按照标准流特性摆放位置,它没有边偏移
  • 静态定位在布局时很少用到
  1. 相对定位relative(重要)
选择器 {
	position:relative;
	top:100px;
	//距离原来的位置的水平坐标沿着y方向走了100px
}
  • 必须有边偏移
  • 相对定位是元素在移动位置的时候,是相对于它原来的位置来说的
  • 和浮动不同,盒子定位离开原本位置之后,位置仍然保留,下面的盒子不会占有而是仍然以标准流的方式对待它(不脱标
  1. 绝对定位absolute(重要)
选择器 {
	position:absolute;
	top:100px;
}
  • 必须有边偏移
  • 如果没有祖先元素或者祖先元素没有定位,则它移动是以浏览器为准定位
  • 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置
  • 绝对定位不再占用原先的位置,下一个盒子会占有它之前的位置(脱标,脱标之后的块级元素不再有继承宽度等标准流才有的特性!)
  1. 固定定位fixed(重要)
选择器{
	position: fixed;
	top: 100px;
}
  • 固定定位是元素固定于浏览器可视区的某个位置
  • 浏览器的可视窗口为参照,可视区域会变化,跟父元素无关,不随滚动条滚动
  • 固定定位不占用原先位置(脱标
  1. 粘性定位sticky
选择器 {
		position: sticky;
		top: 10;
}
  • 粘性定位可以被认为是相对定位和固定定位的混合
  • 以浏览器的可视窗口作为参照点移动元素(固定定位的特点)
  • 粘性定位占有原先的位置(相对定位的特点)
  • 必须添加top、bottom、left、right边偏移中的一个才生效
13.4 子绝父相
  1. 子绝父相的由来
    子级是绝对定位的话,父级要用相对定位
    子级绝对定位,不会占有位置,可以放到父盒子里的任意地方,不会影响其他兄弟盒子
    父盒子需要加定位限制子级,但父亲不能用绝对定位,因为绝对定位不占位置,所以使用相对定位。
    注意:
    1. 浮动只会影响后面的元素
    2. 定位自由
  2. 父绝的特殊场景
    当父元素已经有绝对定位时,直接写子绝即可,因为绝对定位是以最近一级的有定位的祖先元素为参考
  3. 子元素在不定宽度的父元素中水平居中
选择器 {
	position:;
	//先走父元素的50%
	left:50%;      
	//再走版心盒子的50% *如果这里写百分比是相对父
	margin-left:子元素宽度的一半;  
	//相对自己
	transform:translateX(-50%);
}
  1. 子元素在不定宽度的父元素中水平垂直居中
选择器 {
	position:;
	//先走父元素的50%
	left:50%;      
	//再走版心盒子的50% *如果这里写百分比是相对父
	margin-left:子元素宽度的一半;  
	//相对自己
	transform:translate(-50%, -50%%);
}

注意: 不能分开写translateX translateY

13.5 层级问题
  • 标准流 < 浮动 < 定位
  • 不同的定位类型的层级相同,则按照书写顺序,后来者居上
  1. 定位叠放次序 z-index
    使用定位布局时,可能会出现盒子重叠的情况,此时可以使用z-index来控制盒子的前后次序(z轴)
选择器 {
	position:;
	top:;
	z-index:1;
}
  • 数值可以是正整数、负数或者0
  • 谁的值越高,谁就靠上
  • 如果属性值相同,则按照书写顺序,后来者居上
  • 数值不能加单位
  • 只有定位的盒子才有z-index属性,标准流和浮动的盒子都没有
13.6 定位的拓展
  1. 绝对定位的盒子水平居中
    加了绝对定位的盒子不能通过margin:auto;实现水平居中
选择器 {
	position:absolute;
	left:50%;      //父容器宽度的一半
	margin-left:-50% //盒子宽度的一半
}
  1. 绝对定位的盒子垂直居中
选择器 {
position:absolute;
top:50%;      //父容器高度的一半
margin-top:-50% //盒子高度的一半
}
  1. 定位特殊特性
    绝对定位和固定定位也和浮动类似(类似具有行内块特性:
    行内元素添加绝对或者固定定位,可以直接设置高度和宽度(就不需要display)
    块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容大小

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

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

14. 元素的显示与隐藏

14.0 浏览器渲染页面流程

![[渲染流程 3.png]]CSS基础之盒模型/BFC/浮动/定位/浏览器渲染页面流程/元素显示与隐藏_第1张图片

(0)渲染引擎首先通过请求获得文档的内容
(1)解析HTML,构建 DOM Tree
(2)解析CSS,构建 CSSOM Tree(CSS规则树)
(3)将 DOM Tree 和 CSSOM Tree合并,构建Render tree(渲染树)
(4)reflow(重排):根据Render tree进行节点信息计算(Layout)
(5)repaint(重绘):根据计算好的信息绘制整个页面(Painting)
参考

14.1display显示与隐藏

display:none;隐藏对象(隐藏之后,位置不再保留,会让元素完全从渲染树中消失,渲染时不会占据任何空间)
display:block;除了转换为块级元素之外,还可以显示对象
注意:是不可继承属性,会触发回流(重排)

14.2visibility可见性

visibility:visible;元素可视
visibility:hidden;元素隐藏(隐藏之后,位置仍然保留,不会让元素从渲染树中消失,渲染的元素还会占据相应的空间,只是内容不可见)
注意:是可继承属性,不会触发回流(重排)

14.3overflow溢出

对溢出部分:
overflow:visible;(溢出部分仍然显示出来)
overflow:auto;(溢出部分在需要的时候添加滚动条,指比如高不够只添加竖向滚动条)
overflow:hidden;(溢出部分隐藏)
overflow:scroll;(溢出部分显示滚动条,竖向横向都显示,不溢出也显示滚动条)
注意:有定位的盒子请慎用 overflow:hidden;

  • 单行文本溢出用省略号表示
/* 1.此时多出来的文字就会溢出啦,不换行 */ 
/* 默认normal自动换行 */
white-space:nowrap;
/* 2.溢出部分隐藏 */ 
overflow:hidden;
/* 3.溢出文字用省略号显示 */ 
text-overflow: ellipsis;
  • 多行文本溢出用省略号表示
    缺点: 有较大的的兼容问题,适用于webKit浏览器或移动端
    注意:严格控制盒子大小
overflow:hidden; 
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */ 
display:-webkit-box;
/* 限制在一个块元素显示的文本的行数 */ 
webkit-line-clamp: 2; 
/* 设置或检索伸缩盒对象的子元素的排列方式 */ 
-webkit-box-orient: vertical;

你可能感兴趣的:(HTML+CSS,css)