网页前端学习第四次（HTML)——css盒子模型

一、css常用属性设置

1.1.背景

1.1.1.设置元素的背景颜色置元素的背景颜色

 1.2.文本

 

1.2.3. text-decoration
规定添加到文本的修饰，属性值: none,underline,overline,line-through

                1）underline——对文本添加下划线，与html的u元素相同

                2）overline——对文本添加上划线

                3） line-through——对文本添加中划线，与html中的s和strike元素相同

                4）none——关闭原本应该应用到元素上的所有装饰

 1.2.4.text-indent
        设置文本首行缩进

注：em一个相对值，例如页面的文本大小为17px，则2em为17px*2.

1.3.字体
1.3.1.font-family
1.4.对齐方式
left、right、justify（两端对齐）

1.5.display属性
        display属性规定元素应该生成的框的类型，这个属性用于定义建立布局元素时元素生成的显示框类型

 

1.6.浮动
float的属性值有none，left，right

        1.只有横向浮动，并没有纵向浮动

        2.会将元素的display属性变为block

        3.浮动元素的后一个元素会围绕着浮动元素(典型运用时文字围图片)

        4.浮动元素的前一个元素不会受到任何影响(如果你想让两个块状元素并排显示，必须让两个块状元素都应用float)。

二、css盒子模型
border，padding，margin三个属性构成了盒子模型

 

2.1.border（边框)

        设置所有的边框属性

 

3)border-style 的属性

none 默认无边框

dotted 定义一个点线边框

solid 定义实现边框 

double 定义两个边框，两个边框的宽度和 border-width 的值相同

groove 定义3D的沟槽边框，效果取决于边框的颜色值

ridge 定义3D脊边框，效果取决于边框的颜色值

inset 定义一个3D的嵌入边框，效果取决于边框的颜色值

outset 定义一个3D突出边框，效果取决于边框的颜色值

                4）border-collapse

设置是否将表格边框折叠为单一边框

属性值：separate（默认，单元格边框独立），collapse(单元格边框合并）

2.2.padding（内边距）
        设置元素所有内边距的宽度，或者设置各边上的内边距的宽度

        如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性
 

注：通过padding属性设置元素内边距时，会使元素变形，若不想影响格式效果，可以使用margin属性设置元素外边距

2.3.margin（外边距）
设置一个元素所有外边距的宽度，或者设置个边上外边距的宽度。

默认按照上右下左的顺序设定

设置一个值，上右下左都一致

设置两个值，上下一致，左右一致

设置三个值，上右下，左右一致