CSS
once_again_Morn
这个作者很懒,什么都没留下…
展开
-
CSS:为网页添加样式
为网页添加样式术语解释h1{ color:red; background-color:lightblue; text-align: center;}CSS规则 = 选择器 + 声明块选择器选择器:选中元素ID选择器:选中的是对应id值的元素元素选择器类选择器声明块出现在大括号中声明块中包含很多声明(属性),每一个声明(属性)表达了某一方面的样式...原创 2019-08-28 16:05:22 · 224 阅读 · 0 评论 -
CSS:定位
定位视觉格式化模型,大体上将页面中盒子的排列分为三种方式:常规流浮动:float定位:position定位:手动控制元素在包含块中的精准位置涉及的CSS属性:positionposition属性默认值:static,静态定位(不定位)relative:相对定位absolute:绝对定位fixed:固定定位一个元素,只要position的取值不是static,认为该元...原创 2019-09-03 21:14:58 · 181 阅读 · 0 评论 -
CSS:clear
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-09-03 19:40:28 · 891 阅读 · 0 评论 -
CSS:浮动
浮动视觉格式化模型,大体上将页面中盒子的排列分为三种方式:常规流浮动定位应用场景文字环绕横向排列浮动的基本特点修改float属性值为:left:左浮动,元素靠上靠左right:右浮动,元素靠上靠右默认值为none当一个元素浮动后,元素必定为块盒(更改display属性为block)浮动元素的包含块,和常规流一样,为父元素的内容盒盒子尺寸宽度为aut...原创 2019-09-03 19:18:02 · 148 阅读 · 0 评论 -
CSS重置样式表
CSS重置样式表/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre...原创 2019-09-03 09:46:34 · 2340 阅读 · 2 评论 -
CSS:常规流
常规流盒模型:规定单个盒子的规则视觉格式化模型(布局规则):页面中的多个盒子排列规则视觉格式化模型,大体上将页面中盒子的排列分为三种方式:常规流浮动定位常规流布局常规流、文档流、普通文档流、常规文档流所有元素,默认情况下,都属于常规流布局总体规则:块盒独占一行,行盒水平依次排列包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域。...原创 2019-09-03 09:32:03 · 1026 阅读 · 1 评论 -
CSS:行盒的盒模型
行盒的盒模型常见的行盒:包含具体内容的元素span、strong、em、i、img、video、audio显著特点盒子沿着内容沿伸行盒不能设置宽高调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整。内边距(填充区)水平方向有效,垂直方向不会实际占据空间。边框水平方向有效,垂直方向不会实际占据空间。外边距水平方向有效,垂直方向不会实际占据空间。行块盒...原创 2019-09-02 21:49:32 · 796 阅读 · 0 评论 -
CSS:盒模型应用
盒模型应用改变宽高范围默认情况下,width 和 height 设置的是内容盒宽高。页面重构师:将psd文件(设计稿)制作为静态页面衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height,则设置的是内容盒精确计算CSS3:box-sizing改变背景覆盖范围默认情况下,背景覆盖边框盒可以通过background-clip进行修改溢出处理overflo...原创 2019-09-01 17:53:28 · 127 阅读 · 0 评论 -
CSS:盒模型
盒模型box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)盒子类型:行盒,display等于inline的元素块盒,display等于block的元素行盒在页面中不换行、块盒独占一行display默认值为inline浏览器默认样式表设置的块盒:容器元素、h1~h6、p常见的行盒:span、a、img、video、audio盒子的组成部分无论是行盒、还是块盒,都由下面几...原创 2019-09-01 14:00:42 · 139 阅读 · 0 评论 -
CSS:属性值的计算过程
属性值的计算过程一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行[外链图片转存失败(img-70LKi7mp-1567044736940)(assets/2019-05-17-12-27-14.png)]渲染每个元素的前提条件:该元素的所有CSS属性必须有值一个元素,从所有属性都没有值,到所有的属性都有值,这个计算过程,叫做属性值计算过程特殊的两个CSS取值:inheri...原创 2019-08-30 18:23:16 · 262 阅读 · 0 评论 -
CSS:继承
继承子元素会继承父元素的某些CSS属性通常,跟文字内容相关的属性都能被继承原创 2019-08-29 10:12:06 · 92 阅读 · 0 评论 -
CSS:层叠
层叠声明冲突:同一个样式,多次应用到同一个元素层叠:解决声明冲突的过程,浏览器自动处理(权重计算)1. 比较重要性重要性从高到底:作者样式表:开发者书写的样式1) 作者样式表中的!important样式2) 作者样式表中的普通样式3) 浏览器默认样式表中的样式2. 比较特殊性看选择器总体规则:选择器选中的范围越窄,越特殊具体规则:通过选择器,计算出一个4位数(x x...原创 2019-08-29 10:08:07 · 252 阅读 · 0 评论 -
CSS:选择器
选择器选择器:帮助你精准的选中想要的元素简单选择器ID选择器元素选择器类选择器通配符选择器: *,选中所有元素属性选择器根据属性名和属性值选中元素伪类选择器选中某些元素的某种状态以下4个要按顺序写1)link: 超链接未访问时的状态2)visited: 超链接访问过后的状态3)hover: 鼠标悬停状态4)active:激活状态,鼠标按下状...原创 2019-08-29 00:53:39 · 429 阅读 · 0 评论 -
CSS:常见样式声明
常见样式声明color元素内部的文字颜色预设值:定义好的单词三原色,色值:光学三原色(红、绿、蓝),每个颜色可以使用0-255之间的数字来表达,色值。rgb表示法:rgb(0, 255, 0)hex(16进制)表示法:#红绿蓝淘宝红:#ff4400, #f40黑色:#000000,#000白色:#ffffff, #fff红:#ff0000, #f00绿:#00ff0...原创 2019-08-28 22:44:38 · 315 阅读 · 0 评论 -
CSS:二级菜单
CSS:二级菜单html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...原创 2019-09-03 21:46:10 · 495 阅读 · 0 评论