随笔分类 -  css

居中总结
摘要：行盒水平居中：给其父元素设置text-align：“center” 常规流块盒水平居中：定宽高，margin: 0 auto;（上下margin无所谓，左右marign为auto就行） 绝对定位元素的水平居中：定宽高，设置左右为零（left right）margin: 0 auto;（上下margi 阅读全文
posted @ 2020-07-25 10:19 颿華正茂 阅读(111) 评论(0) 推荐(0)
块级格式化上下文（BFC）
摘要：块级格式化上下文：（BFC） 它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局 常规流块盒，水平方向上必须撑满包含块 常规流块盒在垂直方向上依次摆放 常规流块盒若外边距无缝相邻，则外边距合并 自动高度会计算浮动元素，边框盒不会与浮动元素重叠，外边距不会合并（不是同一个元素创建的bfc） 阅读全文
posted @ 2020-07-25 09:43 颿華正茂 阅读(91) 评论(0) 推荐(0)
web字体图标
摘要：web字体：解决用户电脑上没有安装字体类型的方法 当用户电脑上没有该字体的时候，强制让用户下载该字体。 使用@font-face <!-- 制作一个新字体， --> @font-face{ font-family:"good naight"; src:url("../font/wananti.ttf 阅读全文
posted @ 2020-07-25 09:38 颿華正茂 阅读(163) 评论(0) 推荐(0)
@规则
摘要：@规则： 在css文件中 @impot：“路径” 导入另外一个css文件 @charset ‘utf-8’：告诉浏览器，该css文件字符使用的是utf-8，必须写在第一行 阅读全文
posted @ 2020-07-25 09:26 颿華正茂 阅读(66) 评论(0) 推荐(0)
更多样式
摘要：透明度：opacity，它的取值是0-1 1表示不透明，0表示完全透明（设置整个元素的） 鼠标：cursor 可以使用系统值，也可以使用图片,格式为ico格式 cursor：url('') 盒子隐藏： display:none 不生成盒子 visibility：hidden 生成盒子，只是看不见，位 阅读全文
posted @ 2020-07-24 20:34 颿華正茂 阅读(162) 评论(0) 推荐(0)
更多选择器
摘要：更多伪类选择器 1.first-child:选中第一个子元素 2.first-of-type()选中子元素中第一个指定类型的元素 3.last-child：选中最后一个子元素 4.last-of-type():选中最后一个指定类型的子元素 5.nth-child（）选中第几个子元素 6.nth-of 阅读全文
posted @ 2020-07-24 20:28 颿華正茂 阅读(75) 评论(0) 推荐(0)
定位
摘要：定位：position 手动控制元素在包含块中的精准位置 默认值：static：静态定位（不定位） relative：相对定位 absolute：绝对定位 fixed：固定定位 一个元素，只要position的取值不是static，认为该元素是一个定位元素 定位元素会脱离文档流（相对定位除外） 一个 阅读全文
posted @ 2020-07-24 20:12 颿華正茂 阅读(126) 评论(0) 推荐(0)
浮动
摘要：浮动：float：left 元素靠左靠上 float：right 元素靠右靠上 浮动盒子在排列时，会避开常规流块盒子， 常规流块盒子在排列时无视浮动盒子 行盒在排列时，会避开浮动元素 如果文字直接写在块盒当中，浏览器会自动给文字加上一个行盒，（该行盒叫做匿名行盒）包裹文字 文字环绕效果，将图片元素浮 阅读全文
posted @ 2020-07-22 21:27 颿華正茂 阅读(147) 评论(0) 推荐(0)
常规流
摘要：视觉格式化模型（布局规则）：页面中的多个盒子排列规则 大致三种方式 1.常规流 2.浮动 3.定位 包含块：每个盒子都有他的包含块，包含块决定了盒子的排列区域 绝大部分呢情况下：盒子的包含块为其父元素的内容盒 块盒：每个块盒的总宽度，必须刚好等于包含块的宽度 宽度的默认值是auto，将剩余空间占满 阅读全文
posted @ 2020-07-22 21:23 颿華正茂 阅读(110) 评论(0) 推荐(0)
行盒盒模型
摘要：行盒盒模型 显著特点：盒子沿着内容延申 行盒不能设置宽高，若要调整，可以设置字体大小来调整 内边距：左右方向上有效，上下方向上仅仅会影响背景，不会实际占据空间 边框：左右方向上有效，上下方向上仅仅会影响背景，不会实际占据空间 边距：左右有效。上下完全无效 行块盒：具有行盒和块盒的特点（一般用来做分页 阅读全文
posted @ 2020-07-22 21:21 颿華正茂 阅读(153) 评论(0) 推荐(0)
盒模型应用
摘要：改变宽高范围： 默认情况下，width和height设置的是内容盒的宽高。 页面重构师：将psd文件转变为静态页面 改变背景覆盖范围： 默认情况下是覆盖到边框盒，修改使用background-clip进行修改 溢出处理： 处理内容溢出边框盒。使用overflow overflow-y: scroll 阅读全文
posted @ 2020-07-22 21:18 颿華正茂 阅读(120) 评论(0) 推荐(0)
盒模型
摘要：盒模型： box：盒子，每个元素在页面中都会生成一个矩形区域（盒子） 盒子类型： 1.行盒：display等于inline的元素，不可以换行，不能设置宽高 宽高由内容决定 常见行盒： 2.块盒：display等于block的元素，独占一行，可以设置宽高 宽高由设置的值决定 盒模型 1.内容 cont 阅读全文
posted @ 2020-07-22 21:15 颿華正茂 阅读(115) 评论(0) 推荐(0)
属性值的计算过程
摘要：一个一个元素，依次渲染，按照页面文档的树形目录结构进行 渲染每一个元素的前提条件：该元素的所有css属性必须都有值 属性值的计算过程：一个元素，从所有属性没有值到所有属性都有值的过程 1.确定声明值：参考样式表（作者样式表，或者浏览器样式表）中没有冲突的声明，作为css属性值 2.层叠冲突：对样式表 阅读全文
posted @ 2020-07-22 21:13 颿華正茂 阅读(432) 评论(0) 推荐(0)
继承
摘要：继承：子元素会继承父元素的某些css属性 通常跟文字内容相关的属性都会被继承 可以在mdn中查看该属性是否是继承属性 在浏览器中也可以查看，inherit from **** 阅读全文
posted @ 2020-07-22 21:09 颿華正茂 阅读(138) 评论(0) 推荐(0)
层叠（权重计算）
摘要：声明冲突：同一个样式多次用到同一个元素 层叠（权重计算）：解决声明冲突的过程，浏览器自动解决 1.比较重要性 重要性从高到低： 1.作者样式表中的!important样式 2.作者样式表中的普通样式 3.浏览器的默认样式 2.比较特殊性 总体规则：选择器选中的范围越窄，越特殊 具体规则：通过选择器计 阅读全文
posted @ 2020-07-22 20:57 颿華正茂 阅读(182) 评论(0) 推荐(0)
选择器
摘要：id选择器 元素选择器 类选择器 通配符选择器 属性选择器： 根据属性名和属性值来选择到元素 [属性名]：选择属性名为该值的元素 伪类选择器： 选中某些元素的某种状态 :hover{}当鼠标移到该元素上的样式 :active{},激活状态，鼠标点击之后的样式 :ling{}.超链接未访问的状态 :v 阅读全文
posted @ 2020-07-22 20:55 颿華正茂 阅读(145) 评论(0) 推荐(0)
常见的样式声明
摘要：color：文字颜色 值： 预设值：定义好的单词 三原色：光学（红绿蓝）每种颜色可以使用0-255之间的数字来表达 色值写法：rgb（0,0,0） hex表示法（十六进制）#红绿蓝（#008c8c）当两位数一样的时候可以省略一位 几种可以记住的颜色： 淘宝红#f40 黑色#000 白色：#fff 红 阅读全文
posted @ 2020-07-22 20:53 颿華正茂 阅读(215) 评论(0) 推荐(0)
为网页添加样式
摘要：css规则=选择器+声明块 选择器的三种基本写法： 1.元素选择器： 2.id选择器 3.class选择器（类选择器） css写的地方，写在head里的原因：希望浏览器最先读取样式 外部样式表：将样式文件写在独立的文件中。 1.外部样式表可以解决多页面重复的问题 2.有利于浏览器缓存。从而提高页面响 阅读全文
posted @ 2020-07-22 20:50 颿華正茂 阅读(147) 评论(0) 推荐(0)