CSS基础
hua_cuo
这个作者很懒,什么都没留下…
展开
-
12.定位
定位视觉格式化模型,大体上将页面中盒子的排列顺序分为三种常规流浮动定位定位:手动控制元素在包含块中的精确位置涉及css属性:positionposition属性-默认值:static,静态时(不定位)-relative:相对定位-absolute:绝对定位-fixed:固定定位一个元素,只要position的取值不是static,认为该元素是一个定位元素定位元素会脱离文档流(相对定位除外)文档流中的元素摆放时,会忽略脱离了文档流的元素元素计算自动高度时,会忽略脱离了文档流原创 2020-12-06 18:58:19 · 79 阅读 · 0 评论 -
11.浮动
浮动视觉格式化模型,大体上将页面中盒子的排列顺序分为三种常规流浮动定位应用场景文字环绕横向排列浮动的基本特点修改float值-left:左浮动,元素靠左靠上-right,右浮动,元素靠右上默认值为none当一个元素浮动后,元素必定为块盒(更改display属性为block)浮动元素的包含块,和常规流一样,为父元素内容盒盒子尺寸宽度为auto时,适应内容宽度(无内容则为0)高度为auto时,适应内容高度margin为auto时,为0边框、内边距,百分比设置与原创 2020-12-06 18:57:49 · 54 阅读 · 0 评论 -
10.常规流
常规流盒模型:规定单个盒子的规则视觉格式化模型(页面布局):页面中多个盒子的排列规则视觉格式化模型,大体上将页面中的盒子的排列分为三种常规流浮动定位常规流布局常规流、文档流、普通文档流、常规文档流所有元素,默认情况下,都属于常规流布局总体规则:块盒独占一行,行盒水平依次排序包含块(containing block):每个盒子都有他的包含块,包含块决定了盒子的排列区域绝大部分情况下:盒子的包含块,为其父元素的内容盒块盒每个块盒的总宽度,必须刚好等于包含块的总宽度宽度的默认原创 2020-12-06 18:56:14 · 127 阅读 · 0 评论 -
9.行盒的盒模型
行盒的盒模型常见的行盒:包含具体内容的元素span、strong、em、i、img、video、audio显著特点盒子沿着内容延伸行盒不能设置宽高,只与内容的宽高有关调整行盒的宽高应通过设置字体的大小、行高内边距(填充 padding)水平方向有效,垂直方向只会影响背景(看到效果),不会实际占据空间边框(border)水平方向有效,垂直方向只会影响背景(看到效果),不会实际占据空间外边距(margin)水平方向有效,垂直方向只会影响背景(看到效果),不会实际占据空间原创 2020-12-06 18:55:37 · 88 阅读 · 0 评论 -
8.盒模型的应用
盒模型应用改变宽高的范围默认情况下,width和height设置是内容盒的宽高。页面重构师:将psd文件(设计稿)制作为静态页面衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height的时候则是内容盒精确计算css3:box-sizing:border-box(直接用width和height设置)改变背景覆盖范围默认情况下,背景覆盖边框盒可以通过background-clip进行修改溢出处理手动设置宽高后可能会出现溢出正常溢出后依旧可视overflow设置溢原创 2020-12-06 18:55:06 · 107 阅读 · 0 评论 -
7.盒模型
盒模型box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)盒子类型:行盒,display等于inline的元素块盒,display等于block的元素行盒在页面中不换行,块盒独占一行display默认值为inline浏览器中默认样式表设置的块盒:容器元素、h1~h6、p常见的行盒:span、a、img、video、audio盒子的组成无论是行盒还是块盒都由一以下几部分组成内容 contentwidth、 hight设置的是盒子内容的宽高填充 (内边距)paddin原创 2020-12-06 18:54:33 · 77 阅读 · 0 评论 -
6.属性值的计算过程
属性值的计算过程一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>原创 2020-12-06 18:53:51 · 173 阅读 · 0 评论 -
5.继承
继承子元素会继承父元素的某些css属性(具有传递性)通常与文字相关的元素都能继承简写:font在某些情况下可以简写元素:"inherit;"为强制继承CSS能自动继承的属性border-collapseborder-spacingcolorcursordirectionempty-cellsfont(-style | - variant | -weight | -size | -family | -stretch | -size | -adjust)letter-spacingl原创 2020-12-06 18:50:34 · 53 阅读 · 0 评论 -
4.层叠
层叠声明冲突:同一个样式,多次运用到同一个元素层叠:解决声明冲突的过程,浏览器自己处理(权重计算)1.比较重要性重要性由高到低:作者样式表:开发者书写的样式1)作者样式表中的!important样式2)作者样式表中的普通样式3)浏览器默认样式表中的样式2.比较特殊性看选择器总体规则:选择器范围越窄,特殊性越强具体规则:通过选择器计算出一个4位数(越大越特殊)千位:如果是内联式千位计1,否则计0百位:选择器中所有id选择器的数量十位:选择器中所有类选择器,属性选择器,伪类选原创 2020-12-06 18:48:18 · 120 阅读 · 0 评论 -
3.选择器
选择器选择器:帮助你精准的选中你想要的元素简单选择器ID选择器 #元素选择器 元素名类选择器 .(详见“为网页添加样式笔记”)通配符选择器*,表示选中所有元素属性选择器(多种多样)[属性名]或[属性名=“属性值”]根据属性名和属性值选择元素[属性名~=“属性值的一部分”]带有这一部分属性值的属性且这一部分值被空格分隔[属性名*=“属性值的一部分”]带有这一部分属性值的属性eg:[id~=“b”]可选中id=“a b c”,无法选中[abc][href*=“ww原创 2020-12-06 18:47:44 · 67 阅读 · 0 评论 -
2.常见样式声明
常见样式声明color元素内部的文字颜色预设值:定义好的单词(数量有限)三原色:光学三原色(红、绿、蓝),每个颜色可以使用0-255之间的数字表达他的色值rgb(n,n,n)hex(16进制)#红绿蓝(各两位)rgb的三个n分别代表红、绿、蓝的色值淘宝红:#ff4400,#f4o(三个数字个位十位都相同,可以简写为3个数字,表示三个数字的个位和十位的值)黑色:#000000,#000白色:#ffffff,#fff红:#ff0000,#f00绿:#00ff00,#0f0蓝:#原创 2020-12-04 07:04:20 · 149 阅读 · 0 评论 -
1.为网页添加样式
为网页添加样式术语解释h1{ color: red;(字颜色) background-color: royalblue;(背景颜色) text-align: center;(位置) font-size:3em;(字的大小)}css规则 = 选择器+ 声明块选择器选择器:选中元素ID选择器:#id+{}(选中对应id值的元素)元素选择器:元素名+{}(选中所有同名元素)类选择器:.类名+{}(选中所有类名相同的元素)给元素class属性" “内为类名(空格原创 2020-12-04 07:03:37 · 193 阅读 · 0 评论