Css 第二天

126 阅读7分钟

这是我参与8月更文挑战的第4天,活动详情查看: 8月更文挑战

三、尺寸和边框

1.尺寸属性

width:		宽
height:		高
取值,px为单位的数字
      %
max-width	最大宽
min-width	最小宽
max-height	最大高
min-height	最小高
注意:max-width:100%;定义在图片上
    图片可以缩放,但是最大不能超过本身原始宽度

尺寸单位

1.px 像素
2.in  英寸   1in=2.54cm
3.pt  磅值   1pt=1/72in  设置字号大小
4.cm
5.mm
6.em  以父元素设置的数值为基本数值(1倍)
7.rem 以html设置的数值为基本数值(1倍)
面试题em和rem 的区别,html如果没有自主的定义尺寸,那么1rem=16px
8.% 以父元素的尺寸为百分比

2.页面中允许设置尺寸的元素

如果元素自带宽高属性,就可以设置css尺寸(img table)

块级元素行内元素行内块(input)
可以设置尺寸设置尺寸无效可以设置尺寸
不设置宽度,宽度为父元素100%尺寸靠内容撑开不设置宽高,浏览器自动给尺寸
不设置高,高度由内容撑开不同浏览器下默认尺寸不同

3.溢出

内容比较多,容器尺寸较小,会发生溢出
默认情况,都是纵向溢出
overflow:visible;	默认值,溢出部分可见
		  hidden;	溢出隐藏
		  scroll;	添加滚动条,就算不溢出,也会滚动条的槽
		  auto;		如果不溢出,没有滚动条
overflow-x
overflow-y	单独设置x或y轴的滚动条
溢出的底层特别复杂,特殊的底层效果导致可以解决css中一些特殊情况
但是这些特殊情况,都明确表明不要用溢出解决

如何设置横向溢出
父元素设置小宽度,子元素设置大宽度
给父元素设置overflow

4.边框

1)边框的简写形式

border:width	style	color;
width	边框的宽度
style	边框的样式
		solid 	实线
		dashed	短线虚线
		dotted	点点虚线
		double	双实线
color	边框的颜色
border:none/0 清除边框  建议使用0
最简方式 border:style;

2)单边设置

border-方向:width style color;
border-top		上边框
border-right	右边框
border-bottom	下边框
border-left		左边框

3)单属性

同时设置四个方向某一属性

border-style	设置同样样式
border-color	设置同样颜色
border-width	设置同样宽度

4)单边单属性设置

border-方向-属性;
border-right-color
border-left-style

5.边框的倒角(圆角)

border-radius:圆的半径;
			  px/%		50%就是圆
单脚的定义
border-上下-左右-radius:圆的半径;
border-top-left-radius:20px;左上角

6.边框的阴影

box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow	阴影水平偏移距离
v-shadow	阴影垂直偏移距离
blur		阴影模糊程度
spread		阴影大小
color		阴影颜色
inset		加上inset,内部阴影
			不加外部阴影

7.轮廓

轮廓不占页面空间
绘制在元素边框以外的一圈线条
outline:width style color;
outline:0;

四、盒子模型

1.框模型

所有元素皆为框
所有元素在页面上都占据空间,默认情况元素本身的空间,不能被其他元素占据
盒子模型:元素在页面上占据空间的计算方式
元素实际占地宽度:左外边距+左边距+内容区域宽度+右内边距+右边距+右外边距
元素实际占地高度:上外边距+上边框+上内边距+内容区域宽度+下内边距+下边框+下外边距
外边距margin:边框以外的区域
内边距padding:边框到内容区域之间的距离

2.margin

外边距在也页面中,F12选中时为橘黄色
外边距是透明的没有颜色

语法

margin:v1	同时设置四个方向的外边距
margin-top
margin-right
margin-left
margin-bottom

注意

1.取值:px 	为单位数字
	% 	 是父元素宽度的百分比
	auto 上下外边距可以设置auto,但是无效
		 自动计算左右外边距(元素必须定义了宽度)
		 让块级元素在父元素内部水平居中

2.当外边距发生冲突时
左右冲突,以左为准
3.设置元素的外边距,元素会在页面中发生位移效果
4.外边距的颜色是透明的
简写方式:
margin:v1;				同时设置四个方向的外边距	margin:auto
margin:v1 v2;			上下	左右			margin:0 auto	margin:20px auto
margin:v1 v2 v3;		上	左右	下	margin:0px auto	10px;
margin:v1 v2 v3 v4;		上右下左

3.外边距引发的特殊情况

外边距的合并

当两个垂直外边距相遇时,会合并成一个
最终以大为准
解决方案:在一个div中直接把垂直外边距写满
		在设置的时候规避外边距合并

1)块级元素,行内元素,行内块的区别

块级元素

独占一行
设置宽高有效
不设置宽高,宽默认为父元素宽度100%,不设置高,高度默认为内容撑开
4个方向外边距有效

行内元素

与其他行内和行内块公用一行,一行放不下自动换行
设置宽高无效
宽高都靠内容撑开
左右外边距有效
上下外边距无效

行内块

与其他行内和行内块共用一行,一行放不下自动换行
设置宽高有效
不设置宽高,浏览器会给你一个默认的宽高
不同浏览器给的默认宽高不同
四个方向外边距有效
当一个行内块通过外边距改变垂直的位置时,会带着同一行其他行内块和行内元素一起移动

2)自带外边距的元素

body	自带8px4个方向
ul		上下16px外边距,左内边距40px
h1-h6	p	hr	dl	dd	dt	fireldset	form	legned

3)外边距的溢出

在特殊情况下,给子元素添加上外边距,会作用到父元素上
特殊情况:1.父元素没有上外边距
		2.子元素内容区域的上沿和父元素内容区域的上沿重合
解决方案:1.父元素添加上边框,但增加了父元素的实际占地高度
		2.给父元素添加上内边距,但增加了父元素的实际占地高度
		3.给父元素添加overflo:hidden/auto,但是父元素想要溢出就不行了
		4.给父元素添加一个大儿子,空<table></table>

4.内边距padding

内边距时边框到内容之间的距离
内边距有颜色,就是当前元素的背景颜色
改变内边距,感觉上时元素变大了,实际时元素占地面积变大,内容区域没有改变
padding:v1; 设置4个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
取值 px
	%	父元素宽度的百分比
	没有auto值
padding:v1;
padding:v1 v2;  上下   左右
padding:v1 v2 v3;  上   左右   下
padding:v1 v2 v3 v4; 上右下左

5.margin和padding的使用场合

margin	一般用于元素位置的微调
		设置元素和元素之间的距离
padding	用于把元素撑开
		有些需求下,内边距可以做元素位移效果(不是让元素移动,是让区域内容移动)
		有些需求下,内边距用来设置元素之间的距离

6.改变盒子模型计算方式

box-sizing:	content-box	默认值,content--->内容区域
						设置的width时内容区域的宽度
							height时内容区域的宽度
						盒子模型计算这个元素实际占地宽度的公式
						左右外边距+左右边框+左右内边距+width
			border-box	设置的width时border以内的部分
							(border+padding+内容区域宽度)
						盒子模型计算这个元素实际占地宽度的公式
						左右外边距+width
当元素的width设置为百分比的时候,一般都会使用border-box
这样的话,就能够通过随着边框和内边框来控制元素之间的距离
并且在不用计算的情况下,可以让元素不被挤下去