元素尺寸设置

属性说明
width设置元素宽度
min-width设置最小宽度
max-width设置最大宽度
height设置元素高度
min-height设置最小高度
max-height设置最大高度

字体和文本样式

属性说明
font-family字体
font-size字体大小
font-weight字体粗细
font-style字体风格
font设置字体所有属性
text-align文本对齐方式
text-decoration文本的外观修饰
text-indent文本缩进
line-height字体行间距

元素显示模式总结:

元素模式元素排列设置样式默认宽度包含
块元素1行只能放1个块元素可以设置宽高容器的100%容器可以包含任何标签
行元素1行可以放多个行元素不可以设置宽高它本身的内容容纳文本或其他行元素
行内块元素1行可以放多个元素可以设置宽高它本身的内容

元素类型的转换:

转换为块元素 display:block;
转换为行元素 display:inline;
转换为行内块元素 display:inline-block;

背景样式

属性作用
background-color背景颜色预定色/十六进制/RGB色
background-image背景图片url(图片路径)
background-repeat是否平铺repeat/no-repeat/repeat-x/repeat-y
background-position背景位置length/position 分别是x和y坐标
background-attachment背景附着scroll(滚动)/fixed(固定)
background背景简写背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background : rgba透明背景(R,G,B,A) R = 红 G = 绿 B = 蓝 A = 透明度

列表样式

list-style-image (设置图片样式)

  • 参数:
  • none (无)
  • inherit(使用父级样式)
  • url (图片地址)

list-style-position (设置列表标记项的位置)

  • 参数:
  • inside (里面)
  • outside (外面)
  • inherit (使用父级样式)

list-style-type (设置列表标记项的类型)

  • 参数:
  • none(无)
  • disc (实心圆)
  • circle (空心圆)
  • square (方块)
  • decimal (有序数字)
  • lower-roman (小写罗马数字)
  • upper-roman (大写罗马数字)
  • lower-alpha (小写字母)
  • upper-alpha (大写字母)
  • inherit (使用父级样式)

list-style (可同时设置以上所有属性)

样式的三大特性

特性说明
层叠性样式冲突,就近原则覆盖
继承性父级设置的样式对后代一样生效
优先级样式设置的权重


选择器权重
继承或 *0,0,0,0
标签选择器0,0,0,1
后代选择器0,0,0,2
类/伪类0,0,1,0
ID选择器0,1,0,0
行内样式1,0,0,0
!important最高权重

盒子模型

边框属性作用
border-width定义边框粗细
border-style边框的样式
border-color边框颜色
border-top顶部边框
border-bottom底部边框
border-left左边框
border-right右边框
border-collapse合并相邻的边框
border-radius圆角半径


边框类型说明
solid实线边框
dashed虚线边框
dotted点线边框
double双线边框
groove3D凹槽边框
ridge3D凸槽边框
inset3D凹入边框
outset3D凸起边框


内边距属性说明
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距
padding所有内边距


padding 简写法表达意思
padding:5px;代表上下左右都有5像素内边距
padding:5px 10px;代表上下内边距是5像素 左右内边距是10像素
padding:5px 10px 20px;代表上内边距5像素 左右内边距10像素 下内边距20像素
padding:5px 10px 20px 30px;上是5像素 右10像素 下20像素 左是30像素 顺时针


外边距属性说明
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距

块元素水平居中 margin:0 auto;
行元素水平居中 text-align: center;

解决嵌套块元素塌陷(元素合并):
1.为父级元素定义边框
2.为父级元素定义内边距
3.为父级添加 overflow:hidden

阴影类型描述
box-shadow盒子阴影
text-shadow文字阴影


阴影属性描述
h-shadow水平阴影的位置
v-shadow垂直阴影的位置
blur模糊距离
spredd阴影尺寸
color阴影颜色
inset内部阴影

轮廓样式

outline-style(轮廓样式)

  • 参数:
  • none (无)
  • dotted (点线)
  • dashed (虚线)
  • solid (实线)
  • double (双线)
  • groove (3D凹槽)
  • ridge (3D凸槽)
  • inset (3D凹入)
  • outset (3D凸起)

outline-color (轮廓颜色)

  • 参数:
  • 颜色名
  • RGB
  • 16进制

outline-width (轮廓宽度)

  • 参数:
  • 像素
  • 百分比

三种传统网页布局方式:

1.普通流(标准流)
所谓标准流就是用标签按照规定好默认方式排列

2.浮动
有很多网页布局标准流无法完成,此时就需要浮动完成布局,因为浮动可以改变元素标签的默认排列方式。
浮动可以用于将元素移动到左或右边缘。

3.定位
定位主要就是设置元素与目标元素的距离

网页布局准则:多个块元素纵向排列用标准流,多个块元素横向排列用浮动。

浮动(float)

浮动的特性:
1.脱离标准普通流的控制,移动到指定位置。
2.浮动到盒子不再保留原先到位置
3.元素互相贴靠在一起,不会有缝隙。如果空间不够会自动换行。
4.如果行内元素有了浮动,则允许可以直接给高度和宽度进行设置。

属性含义
float设置浮动的方向
clear设置元素哪一侧不允许出现浮动元素
clip裁剪绝对定位元素
overflow设置内容溢出时的处理
display设置元素如何显示
visibility定义元素是否可见

定位(position)

position (定义定位的类型)

  • 属性:
  • absolute(绝对定位,会忽略其它元素)
  • relative (相对定位,紧贴其它元素)
  • static (静止定位)
  • inberit (使用父级样式类型)

top (顶部距离)

  • 参数:
  • 像素
  • 百分比

right (右边距离)

  • 参数:
  • 像素
  • 百分比

left (左边距离)

  • 参数:
  • 像素
  • 百分比

bottom (底部距离)

  • 参数:
  • 像素
  • 百分比




文章目录