前言:
今天是学习CSS的第四天,让我们看看今天的学习内容
文档流(normal flow)
网页是一个多层的结构,css可以给每一层设置样式,
最终我们看到是最上面的一层。
文档流是网页最底下的那一层
元素分为两种状态:在文档流中,脱离文档流
之前将元素分为三类,块元素、行内元素、行内块元素
分别具有一些特点,这些特点都是元素在文档流中的特点
块元素:
不会独占一行,宽是父元素内容区宽度,高是被内容撑开
行内元素
不会独占一行,宽高是被内容撑开,不可以自定义宽高
行内块
兼具块元素,行内元素的特点
注意:
1、一旦元素脱离文档流,以上的分类,以上分类的特点都不复存在
2、我们创建的元素默认是在文档流
布局相关样式
文档流默认的布局,浮动,定位,弹性盒子等*/
/* 盒模型、盒子模型、框模型(box model)*/
/*
网页中也有很多的元素,将各种元素摆放在合适的位置,
盒模型将页面所有元素的形状都统一了,你在布局时,
只需要考虑到元素的大小即可
*/
/* 盒模型 快递
内容区 content 冰箱
内边距 padding 泡沫
边框 border 快递盒子
外边距 margin 快递离你的距离
盒子的大小:内容区、内边距、边框 有关系,跟外边距是没有关系
*/
.box1{
width: 100px;
height: 100px;
background-color: red;
}
/*
1、内容区 content:
width:; 内容区的宽
height:; 内容区的高
边框(border) 边框用来隔开盒子内部和盒子外部
设置边框,三个要素,缺一不可 宽度、颜色、样式
边框的宽度 border-width
1、可以设置多个值,以空格隔开即可
4个值 上 右 下 左
3个值 上 左右 下
2个值 上下 左右
1个值 上下左右
2、单独设置某一边的宽度
border-top-width: ;
border-bottom-width: ;
border-left-width: ;
border-right-width: ;
3、border-width 是由默认值,默认大小在1-3px
边框的颜色 border-color
1、可以设置多个值
规则跟border-width是一样
2、单独设置某一边的颜色
border-XXX-color:;
XXX:top、right、bottom、left
3、小箭头的写法
border-color: transparent transparent orange transparent ;
4、border-color 有默认值,默认值是黑色
边框的样式 border-style
1、边框样式的种类
solid 实线
dotted 点状的虚线
dashed 虚线
double 双线
2、可以写多个样式
规则跟border-width一样
3、单独设置某一边样式
border-XXX-style:;
XXX:top、right、bottom、left
4、border-style 默认值是none
-->
<!--
边框 border
1、语法: border: 大小 颜色 样式;
三要素顺序是无所谓
2、单独设置某一边的边框
border-top
border-right
border-bottom
border-left
3、 border-bottom: none; 不要某边边框
内边距 padding 是边框和内容区之间的距离
1、可以单独设置某一边的内边距
padding-top:;
padding-right: ;
padding-bottom:;
padding-left:;
2、内边距padding简写
可以写多个值,规则跟border-width是一样
外边距 margin
不影响盒子的大小,可以改变盒子的位置
margin-top 设置元素上外边距,如果正值,元素向下移动,如果负值,元素向上移动
margin-right 设置元素右外边距,元素是没有效果
margin-botoom 设置元素下外边距,正值,元素自己不懂,会挤下面的元素向下移动,负值,下面的元素向上移动
margin-left 设置元素左外边距,正值,元素向右移动,负值,元素向左移动
margin简写
margin 可以设置多个值,规则跟padding一样
面试题: 什么是过度约束,浏览器是如何调整水平方向值? */
/*
水平方向能影响到inner所占位置的因素有哪些
margin-left border-left padding-left width padding-right border-right margin-right
过度约束:
浏览器规定,元素水平方向7个值相加,必须要等与其父元素内容区的宽度,
如果不等于,浏览器就会进行调整,让等式成立
margin-left+border-left+padding-left + width + padding-right +
border-right+ margin-right=父元素内容区的宽度
40+20+0+100+0+20+0=600
180 != 600
浏览器如何调整
1、如果水平方向7个值当中没有auto,浏览器会自动调整margin-right的值
40+20+0+100+0+20+ 420 =600
2、7个值当中,有3个值可以设置auto,margin-left width margin-right
(1) 设置1个auto 谁是auto,浏览器就调整谁
margin-left
auto+20+0+100+0+20+0=600 auto=460
width
40+20+0+auto+0+20+0=600 auto=520
margin-right
(2)设置2个auto
margin-left width 调整width
width margin-right 调整width
margin-left margin-right 同时调整margin-left margin-right
设置3个auto
margin-left width margin-right 调整的就是width
总结:
1、如果7个值当中有auto,调整的顺序
width > margin-left margin-right
2、如果想让块元素水平方向居中,必须要width为固定值,左右外边距为auto