一、盒模型
/* 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;
边框设置的补充:
网页三角标制作
- 元素设置宽高为0
- 统一设置四个方向透明边框
- 调整某个方向边框可见色
4. 圆角边框
- 属性:border-radius 指定圆角半径
- 取值:像素值或百分比
- 取值规律:
一个值 表示统一设置上右下左
四个值 表示分别设置上右下左
两个值 表示分别设置上下 左右
三个值 表示分别设置上右下,左右保持一致
3. 内边距
- 属性:padding
- 作用:调整元素内容框与边框之间的距离
- 取值:
20px; 一个值表示统一设置上右下左
20px 30px; 两个值表示分别设置(上下) (左右)
20px 30px 40px; 三个值表示分别设置上右下,左右保持一致
20px 30px 40px 50px; 表示分别设置上右下左
- 单方向内边距,只能取一个值:
padding-top
padding-right
padding-bottom
padding-left
4. 外边距
- 属性:margin
- 作用:调整元素与元素之间的距离
- 特殊: 1)margin:0; 取消默认外边距
2)margin:0 auto;左右自动外边距,实现元素在父元素范围内水平居中
3)margin:-10px;元素位置的微调 - 单方向外边距:只取一个值 margin-top margin-right margin-bottom margin-left
- 外边距合并:
1)垂直方向
1. 子元素的margin-top作用于父元素上
解决:
为父元素添加顶部边框;
或为父元素设置padding-top:0.1px;
2. 元素之间同时设置垂直方向的外边距,最终取较大的值
2)水平方向
块元素对盒模型相关属性(width,height,padding,border,margin)完全支持;
行内元素对盒模型相关属性不完全支持,不支持width/height,不支持上下边距
行内元素水平方向上的外边距会叠加显示 - 带有默认边距的元素:
body,h1,h2,h3,h4,h5,h6,p,ul,ol{ margin:0; padding:0; list-style:none;