CSS页面样式、布局的补充

一、盒模型

/* ctrl+/ 注释 */

width: 200px;

height: 200px;

/* background-color: red; */

/* overflow : hidden(隐藏)/scroll/auto */

/* overflow: auto; */

overflow: hidden;

/* 5像素 实线 红色边框 */

/* solid 实线 */

/* dotted(点线)/dashed(虚线)/double(双线) */

border: 5px solid red;

/* 右边框样式 */

border-right-style: double;

/* 下边框颜色 */

border-bottom-color: #000;

/* 上边框 宽度 样式 颜色 */

border-top: 10px dotted #0f0;

内容溢出：内容超出元素的尺寸范围，称为溢出。默认情况下溢出部分仍然可见，可以使用overflow调整溢出部分的显示,取值如下：

取值	作用
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	强制在水平和垂直方向添加滚动条
auto	自动在溢出方向添加可用滚动条

边框实现：

语法：

border:width style color;

边框样式为必填项，分为：

样式取值	含义
solid	实线边框
dotted	点线边框
dashed	虚线边框
double	双线边框

单边框设置

分别设置某一方向的边框，取值：width style color;

属性	作用
border-top	设置上边框
border-bottom	设置下边框
border-left	设置左边框
border-right	设置右边框

二、文本属性

font-size: 32px;

/* 字体粗细 normal 正常 bold 加粗 */

font-weight: bold;

/* 字体样式 normal 正常 italic 倾斜*/

font-style: italic;

font-family: monospace;

/* font:italic bold 32px monospace; */

font: 32px monospace;

/* font: 32px/400px monospace; */

/* 对齐方式 水平居中 */

text-align: center;

/* 行高 行高=高度 垂直居中 */

line-height: 400px;

边框设置的补充：

​ 网页三角标制作

1. 元素设置宽高为0
2. 统一设置四个方向透明边框
3. 调整某个方向边框可见色

4. 圆角边框

1. 属性：border-radius 指定圆角半径
2. 取值：像素值或百分比
3. 取值规律：

一个值     表示统一设置上右下左
四个值     表示分别设置上右下左
两个值     表示分别设置上下 左右
三个值     表示分别设置上右下，左右保持一致

3. 内边距

1. 属性：padding
2. 作用：调整元素内容框与边框之间的距离
3. 取值：

20px;                   一个值表示统一设置上右下左
20px 30px;              两个值表示分别设置(上下) (左右)
20px 30px 40px;         三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px;    表示分别设置上右下左

1. 单方向内边距,只能取一个值：

padding-top
padding-right
padding-bottom
padding-left

4. 外边距

1. 属性：margin
2. 作用：调整元素与元素之间的距离
3. 特殊： 1）margin:0; 取消默认外边距
   2）margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中
   3）margin:-10px;元素位置的微调
4. 单方向外边距：只取一个值 margin-top margin-right margin-bottom margin-left
5. 外边距合并：
   1）垂直方向
   1. 子元素的margin-top作用于父元素上
   解决：
   为父元素添加顶部边框；
   或为父元素设置padding-top:0.1px;
   2. 元素之间同时设置垂直方向的外边距，最终取较大的值
   2）水平方向
   块元素对盒模型相关属性（width,height,padding,border,margin）完全支持;
   行内元素对盒模型相关属性不完全支持，不支持width/height,不支持上下边距
   行内元素水平方向上的外边距会叠加显示
6. 带有默认边距的元素：
   body,h1,h2,h3,h4,h5,h6,p,ul,ol{ margin:0; padding:0; list-style:none;