![](https://img-blog.csdnimg.cn/20191019180632898.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS3
CSS简单基础
Mr.Envelope?
这个作者很懒,什么都没留下…
展开
-
布局
布局 多栏布局 两栏布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...原创 2019-11-14 23:41:43 · 3737 阅读 · 0 评论 -
块级格式化上下文(面试有用)
块级格式化上下文(面试有用) 全称Block Formatting Context ,简称BFC 它是一块 独立的渲染区域,它规定了该区域中,常规流块盒的布局 常规流块盒在水平方向上,必须撑满包含块; 常规流块盒在包含块的垂直方向上依次摆放; 常规流块盒若外边距无缝相邻,则进行外边距合并; 常规流块盒的自动高度和摆放位置,无视浮动元素。 BFC渲染区域: 这个区域由某个HTML元素创建,以下元...原创 2019-11-14 23:40:37 · 239 阅读 · 0 评论 -
web字体和图标
web字体和图标 web字体 解决用户电脑上没有安装相应字体的问题。 当用户电脑上没有安装相应字体时,强制让用户下载该字体。 使用@font-face指令制作一个新字体 @font-face{ font-family:"good night"; scr:url("./font/晚安体.ttf") } 字体图标 iconfont.cn 字体图标库(阿里巴巴) 在线使用: ① 选...原创 2019-11-14 23:39:45 · 136 阅读 · 0 评论 -
@规则
@规则 at-rule: @规则,@语句,CSS语句,CSS指令 import @import “路径”; 导入另外一个CSS文件 @import".\css\reset.css" charset @charset “utf-8” 告诉浏览器该CSS文件,使用的字符编码集为utf-8。 @charset “utf-8” 必须写在第一行 ...原创 2019-11-14 23:39:13 · 143 阅读 · 0 评论 -
表格元素
表格元素 在CSS技术出现前,网页通常使用表格布局。 后台管理系统中可能会使用表格。 前台:面向用户 后台:面向管理员。对界面要求不高,对功能性要求高。 问:表格不再使用于网页布局? 答:表格的渲染速度过慢。 表格术语 表格:table 表格标题:caption 表头:thead 表格主体:tbody 表尾:tfoot 表格行:tr 标题单元格:th 单元格:td <!DOCTYPE ...原创 2019-11-07 23:30:28 · 151 阅读 · 0 评论 -
表单练习
表单练习 练习尝试做一个B站登录页面,具体代码如下。 CSS reg.css .clearfix::after{ content: ""; display: block; clear: both; } .form{ width: 980px; margin: 1em auto; } .form h2{ width: 100%; te...原创 2019-11-07 22:39:06 · 274 阅读 · 0 评论 -
美化表单元素
美化表单元素 新的伪类 focus 元素聚焦时的样式 通常用于设置选中框 <style> input:focus{ outline: 2px #008c8c solid; outline-offset: 0px;; color: red; } </st...原创 2019-11-04 23:06:07 · 198 阅读 · 0 评论 -
更多的样式
更多的样式 透明度 opacity,设置整个元素的透明度,取值为0 ~ 1 在颜色位置设置alpha通道(rgba),取值为0 ~ 1 鼠标 使用cursor设置,详见mdn 可以用.ico/.cur文件设置鼠标为一个图片 cursor:url("图片路径"),auto; 盒子隐藏 display:none,不生成盒子 visibility:hidden,生成盒子,只是从视觉上移除盒子,盒...原创 2019-10-30 23:05:09 · 432 阅读 · 0 评论 -
更多的选择器
更多的选择器 更多伪类选择器 :first-child 选中第一个子元素 :first-of-type /* 选中a元素,并且a元素是第一个子元素 */ a:first-child{ color: red; } /* 选中的是子元素的第一个a元素 */ a:first-of-type{ ...原创 2019-10-30 23:03:54 · 105 阅读 · 0 评论 -
定位
定位 定位:手动控制元素在包含块中的精准位置。 涉及的CSS属性:position。 position属性 默认值:static ,静态定位(不定位) relative:相对定位 absolute:绝对定位 fixed:固定定位 一个元素,只要position的取值不是static,认为该元素是一个定位元素。 定位元素会脱离常规流(文档流),相对定位除外。 一个脱离文档流的元素: 文档流中元...原创 2019-10-30 23:03:13 · 122 阅读 · 0 评论 -
定位
定位 定位:手动控制元素在包含块中的精准位置。 涉及的CSS属性:position。 position属性 默认值:static ,静态定位(不定位) relative:相对定位 absolute:绝对定位 fixed:固定定位 一个元素,只要position的取值不是static,认为该元素是一个定位元素。 定位元素会脱离常规流(文档流),相对定位除外。 一个脱离文档流的元素: 文档流中元...原创 2019-10-29 23:14:19 · 120 阅读 · 0 评论 -
浮动
浮动 视觉格式化模型,大体上将页面中盒子的排列分为三种方式: 常规流 浮动 定位 浮动应用场景 文字环绕 横向排列 浮动的基本特点 修改float属性值为: left:左浮动,元素靠上靠左 right:右浮动,元素靠上靠右 默认值为none 当一个元素浮动后,元素必定为块盒(更改display属性为block) 浮动元素的包含块,与常规流一样,为父元素的内容盒。 盒子尺寸 宽度为...原创 2019-10-21 23:57:10 · 264 阅读 · 0 评论 -
为网页添加样式
为网页添加样式 术语解释 h1 { color: red; background: lightblue; text-align: center; } CSS规则 = 选择器 + 声明块 选择器 ID选择器:选中的是对应的ID值的元素 元素选择器 类选择器 选择器: 选中元素 声明块 声明块中包含很多声明(属性),每一个声明(属性),表...原创 2019-10-19 17:01:33 · 166 阅读 · 0 评论 -
常见样式声明
常见样式声明 color 元素内部的文字颜色 预设值:定义好的单词 三原色,色值:光学三原色(红、绿、蓝),每种颜色可以使用0-255之间的数字来表达,色值。 rgb表示法: rgb(0,255,0) hex(16进制)表示法: #红绿蓝 常见色: 淘宝红:#ff4400/f40 黑色:#000000/000 白色:#ffffff/fff 紫色:#f0f 青色:#0ff 黄色:#ff0 灰色...原创 2019-10-19 17:01:59 · 234 阅读 · 0 评论 -
选择器
选择器 选择器:帮助精准的选中想要的元素 简单选择器 ID选择器 元素选择器 类选择器 通配符选择器 *,表示选中所有元素 属性选择器 根据属性名和属性值选中元素 伪类选择器 选中某些元素的某种状态,写法: :hover{ color:red; } hover:鼠标悬停的状态; active:激活状态,鼠标按下状态; link:超链接未访问时的状态; visited:超链接...原创 2019-10-19 17:03:10 · 149 阅读 · 0 评论 -
层叠
层叠 声明冲突:同一个样式多次应用到一个元素。 层叠:解决声明冲突的过程,叫做层叠(权重计算)。层叠由浏览器自动处理。 1.比较重要性 重要性从高到低: 作者样式表:开发者书写的样式 1) 作者样式表中的!important样式(尽量不要在开发中添加,不便今后更改); 2) 作者样式表中的普通样式; 3) 浏览器默认样式表。 2.比较特殊性 若比较重要性后仍存在冲突,则比较特殊性。 看选择器 ...原创 2019-10-19 17:03:36 · 216 阅读 · 0 评论 -
继承
继承 子元素会继承父元素的某些css属性。 通常和文字内容相关的属性都会被继承。 是否可以被继承,可以于MDN查询。原创 2019-10-19 17:04:09 · 82 阅读 · 0 评论 -
属性值的计算过程
属性值的计算过程(面试有用) 一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行。 渲染每个元素的前提条件:该元素的所有CSS属性必须有值。 一个元素,从所有属性都没有值,到所有的属性都有值,这个计算过程,叫做属性值计算过程。 属性计算过程简介: 确认声明值:参考样式表中没有冲突的声明,作为CSS属性值。 层叠冲突:对样式表中冲突的声明使用层叠规则,确定CSS属性值。 比较...原创 2019-10-19 17:04:52 · 281 阅读 · 0 评论 -
盒模型
盒模型 box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)。 盒子类型: 行盒: display属性等于inline的元素。 块盒: display属性等于block的元素。 行盒在页面中不换行,块盒独占一行。 display属性默认值为inline. 浏览器默认样式表设置的块盒:容器元素、h1~h6、p 常见的行盒:span、a、img、video、audio 盒子的组成部分 无论是...原创 2019-10-19 17:05:46 · 134 阅读 · 0 评论 -
盒模型应用
盒模型应用 改变宽高范围 默认情况下,width和height设置的是内容盒宽高。 页面重构师:将psd文件(设计稿)制作静态页面。 衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height,则使用的是内容盒。 处理方法: 精确计算(不推荐) CSS3:box-sizing box-sizing:border-box; 改变背景覆盖范围 默认情况下,背景覆盖边框盒。 可以...原创 2019-10-19 17:06:51 · 150 阅读 · 0 评论 -
行盒的盒模型
行盒的盒模型 常见的行盒:包含具体内容的元素 a、span、strong、em、i、img、video、audio… 显著特点 盒子沿着内容延伸。 行盒不能设置宽高。 调整行盒的宽高,应该使用字体大小,行高,字体类型,间接调整。 内边距(填充区) 水平方向有效,垂直方向仅会影响背景,不会实际占据空间。 边框 水平方向有效,垂直方向仅会影响背景,不会实际占据空间。 外边距 水平方向有...原创 2019-10-19 17:07:20 · 158 阅读 · 0 评论 -
常规流
常规流 盒模型:规定单个盒子的规则。 视觉格式化模型(布局规则):页面中的多个盒子排列规则。 视觉格式化模型,大体上将页面中盒子的排列分为三种方式: 常规流; 浮动; 定位。 常规流布局 常规流又称文档流,普通文档流,常规文档流 所有元素,默认情况下,都属于常规流布局 总体规则:块盒独占一行,行盒水平依次排列。 包含块(containing block):每个盒子都有它的包含块,包含块决定了盒...原创 2019-10-19 17:55:07 · 283 阅读 · 0 评论