从头学前端-CSS基础03

1.盒子模型

• 盒子模型组成： > 盒子模型组成的主要有 边框border，外边距margin ，内边距padding，内容content；

- 边框border:
	> border可以设置元素的边距，边距有三部分，宽度，验收，颜色

	> border: border-width || border-style || border-color
	> 边框四个边可以分开来写，如border-top:
	> border-collapse:collapse可以合并表格的相邻边框
	> 边框会影响盒子的实际大小；增加盒子大小，盒子的总大小为宽度或高度加上两个边框的大小；
	

-  内边距
	> padding用于设置内边距，即盒子边框和内容的距离.默认是0

	> 语法 padding : 上 右 下 左
	> padding也会影响盒子的大小；如果盒子已有宽度和高度，内边距会撑大盒子的大小
	> 如果盒子没有指定高度和宽度，那么padding不会撑开盒子；只有指定宽度才会撑大宽度，指定高度才会撑大高度；
	![在这里插入图片描述](https://img-blog.csdnimg.cn/774157a7bd834c7ca92fea2608c31f15.png)		

-  外边距margin
	> margin用于设置外边距，即盒子与盒子之间的距离

	> 语法 margin: top right bottom left 上右下左
	> 外边距可以让设置了width的块级元素水平居中:
	 > {margin: 0 auto}
	 > 行内元素或行内快级元素水平居中，给父元素添加属性text-align: center
	 ---

	 > 嵌套关系的块级元素垂直外边距的塌陷问题；在父元素和子元素同时具有margin-top属性时，以最大值为准；
	 解决方式有：给父元素

	 > 设置边框 border {1px }
	 > 设置内边距
	 > 添加overflow: hidden
	> 浮动的盒子不会有这个塌陷问题
	 

	 ---

	 > 清除内外边距：
	 不同的网页元素带有不同的内外边距，不同浏览器也不一样，此时考虑清除内外边距； *  { margin:0 padding:0 }

	 > 行内元素尽量只设置左右边距，考虑兼容性问题；
	 

CSS3盒子属性

• 圆角边框: > 用于设置元素的外边框圆角

> border-radius : length  单位是px 或者是百分比
> 原理：盒子矩形边框和圆形的交集
> border-radius是复合属性，最多可以有四个值，表示四个角；左上、右上、右下，坐下

• 盒子阴影 > box-shadow，属性如下图：

> 盒子阴影不占空间，不影响盒子大小

在这里插入图片描述

• 文字阴影 > text-shadow： h-shadow v -shadow blur color
• 

  在这里插入图片描述

2.浮动

传统网页布局的三种方式： 普通流，浮动，定位

普通流(标准流)：就是标签按照默认方式排列； 块级元素独占一行，从上向下顺序排列，行内元素从左向右排列；碰到父元素边缘则自动换行undefined

网页布局第一准则：

多个块级元素纵向排列找标准流，横向排列找浮动

什么是浮动：

float属性用于创建浮动层，将其移动到一边，直到左边缘或右边缘触及到包含块或另一个浮动框的边缘；

浮动特性

• 浮动元素会脱离标准流 - 浮动的盒子不再保留原来的位置 - 脱离了标准流的控制
• 浮动元素会一行内显示 - 如果多个盒子都添加了浮动，那么所有浮动的盒子将会在一行内显示，并且顶端对齐； - 浮动的元素是互相紧贴到一起，如果父级元素的宽度装不下元素，浮动元素会另起一行靠左排列
• 浮动元素会具有行内块元素的特点 - 任何元素都可以浮动，给元素添加了浮动，元素就具有了行内块元素的特性； - 如果行内元素给了浮动，那么行内元素就可以设置高度和宽度 - 如果块级元素添加了浮动，且没有设置宽度，那它的大小根据内容而定； ---

**为了约束浮动元素位置，网页布局时，先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右的位置**

• 浮动布局要点 - 先父元素上下布局，后浮动元素左右布局 - 理论上一个元素浮动，后面的兄弟元素也要浮动； - 浮动的盒子只会影响后面盒子的标准流，不会影响前面的标准流；div在服务的盒子前面，还是会独占一行；

清除浮动

很多情况下，父盒子不方便给高度，但子盒子浮动又不占有位置，最后父盒子的高度是0，就会影响到下面的标准流盒子;这个时候就需要清除服务，就是清除浮动元素的影响； 清除浮动后，父元素就会根据浮动的子元素自动计算高度；

• 语法：

在这里插入图片描述

• 清除浮动的方法： - 清除浮动的策略是闭合浮动，只让浮动在父元素内影响，不影响父盒子外面的盒子； - 额外标签法：在最后一个浮动元素的后面添加一个元素，添加样式属性 div style= "clear:both"></div； 会添加多个无意义的标签 - 父级添加overflow属性，设置为auto,hidden 或scroll - 父元素添加：after伪类； 不需要添加额外标签， - 给父元素添加 双伪元素；before和after; 原理是在父盒子中的第一个元素和最后一个元素添加一个块级元素；

在这里插入图片描述