码迷,mamicode.com
首页 > 其他好文 > 详细

盒子模型

时间:2018-12-10 20:45:18      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:pad   问题   no-repeat   一个   不重复   图片   ash   背景   indent   

1、内容--宽度:width;单位px、百分比(继承)、em、rem;
高度:height;单位px、百分比(继承)、em、rem;
背景--背景色:background-color;颜色单词、十六进制表示法、rgb、rgba;
背景图片:background-image:url(路径);
背景图片重复:background-repeat;no-repeat(不重复)、repeat-x(水平重复)、repeat-y(垂直重复)、repeat(水平垂直重复、默认);
背景定位:background-position:left、center、right、top、center、bottom、具体的数值(单位px)
背景连写:background:背景颜色 背景图片 背景图片重复 背景定位;可以只单写某一个属性;

2、填充:上填充--padding-top
下填充--padding-bottom
左填充--padding-left
右填充--padding-right
填充连写--padding:1个值--》上、右、下、左全部是这个值;
2个值--》第一个值表示上下,第二个值表示左右;
3个值--》第一个值表示上,第二个值表示左右,第三个值表示下;
4个值--》依次为上、右、下、左;(顺时针方向)
注意:padding会改变盒子的大小,要想在添加padding的同时保持盒子的大小不变,应将padding的值从盒子的大小中减去;

3、边框:边框粗细--border-width
边框颜色--border-color
边框样式--border-style:solid(实线)、dashed(虚线)、dotted(点线)
边框连写--border:width style color;
可以单独只写某一边的边框--border-top、border-bottom、border-left、border-right
注意:边框的对齐方式为向外对齐,所以边框会改变盒子大小;

4、外边距:上边距--margin-top
下边距--margin-bottom
左边距--margin-left
右边距--margin-right
外边距连写--margin:1个值 2个值 3个值 4个值(参照padding);

默认文档流布局下,父子上边界共用问题?
解决:1、使用padding;
2、给父级使用border;
3、给父级添加属性--overflow:hidden;
4、浮动;
5、定位;

外边距塌陷:在垂直方向上上下边距会合并,取最大值;

盒子水平居中:margin:0 auto;

样式的继承:width、color、font-、text-、line-height都可以被继承;

<ins></ins>下划线标记

<del></del>删除线标记

文本修饰:text-decoration--underline;下划线
line-through;删除线
none;无/没有修饰;

文本对齐:text-align--left;左对齐
center;居中对齐
right;右对齐

文本缩进:text-indent;指的是文本的首行缩进;
单位px、em;

行高:line-height--用于设置一行文本的高度,常用于设置一行文本在容器当中垂直居中;
单位:1、px;
2、百分比;基于文字大小的百分比,“%”前必须是整十,如:150%、200%
3、em;相对单位,同样是基于文字大小;如:1.5em、2em;
4、没有单位;a--没有继承的情况下,相当于em;
b--在有继承的情况下:
i、父级的行高有单位em,则会先计算好行高,然后将行高的数值直接继承给子级,子级本身不会再计算行高;
ii、行高没有单位,则父级会直接将行高继承给子级,然后子级根据行高值自行计算行高;


font连写--font:样式/粗细 大小 格式;大小和格式必须都有,缺少任何一个都不行;

元素的显示方式:
1、块级--block;独占一行,支持宽高;
2、行内--inline;和其他行内元素在一行显示,不支持宽高;
3、行内块级--inline-block,既有行内元素特性,又有块级元素的特性;同样在一行中显示,并且支持宽高;
display:block/inline/inline-block;
以上为默认文档流(标准文档流)下的情况;

在有链接的情况下,a标记无法继承父级的color样式;

盒子模型

标签:pad   问题   no-repeat   一个   不重复   图片   ash   背景   indent   

原文地址:https://www.cnblogs.com/tangdiying/p/10098546.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!