css
zhuqian88
IT信息技术
展开
-
网页布局
网页布局PC端常用布局:Div+Css弹性盒子布局响应式布局Div + Css先行再列从宏观到到微观从左侧到右侧原创 2019-11-07 18:24:49 · 286 阅读 · 0 评论 -
css初始化
css初始化各大浏览器,都具有自己的默认值, 导致我们的页面在不同浏览器中显示的效果不一样.为了让页面在各大浏览器里面显示效果一致, 需要css初始化, 统一css样式.参考地址: https://blog.csdn.net/kiss377052/article/details/78742097新浪官网:body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fie...原创 2019-11-07 16:45:53 · 113 阅读 · 0 评论 -
CSS_变形
变形属性名: transform属性值:none 不变形rotate 旋转 单位: deg 度 rotate() rotateX() rotateY()skew 扭曲 单位: deg 度 90*奇数 都会扭成一条线, 导致看不见 skew() skewX() skewY()sca...原创 2019-11-07 16:44:22 · 105 阅读 · 0 评论 -
CSS_平滑过渡
平滑过渡属性名: transition属性值: 过渡的属性 过渡时间 速率 延迟时间 默认值:ease 0s注意点:transition 只能用于能够 ± 属性的属性时间单位: s/ms0.5s => .5s1.5 => 1.5s<style> .box{ width...原创 2019-11-07 16:43:21 · 918 阅读 · 0 评论 -
元素转换
元素转换属性名: display属性值:none 隐藏(不占位)block 转为 块级元素inline 转为 行级元素(内联元素)inline-block 转为 行块级元素(内联-块元素)table 转为 块级表格table-cell 转为 td单元格属性名: visibility属性值:hidden ...原创 2019-11-07 16:40:30 · 143 阅读 · 0 评论 -
定位
绝对定位定位场景: 只要页面多个元素 需要发生重叠时, 就可以使用定位常用定位:绝对定位相对定位固定定位学习任何一个定位, 都必须掌握两点:位置是否保留原点绝对定位:position: absolute不保留原来的位置基于网页第一页的四个角落<style> .box{width: 100px;height: 100px;}...原创 2019-11-07 16:39:16 · 69 阅读 · 0 评论 -
浮动
浮动浮动:属性名: float属性值: left | right | none场景: 看到竖排的变成 横排的基本都是靠 浮动实现的常规: 浮动一般用于 块级元素注意点: 浮动不会保留原来的位置, 下面有文字会产生环绕效果取消浮动: 只是保留原来的位置, 浮动后的效果依旧存在属性名: clear属性值: left | right | both清除浮动方法:...原创 2019-11-07 16:35:48 · 115 阅读 · 0 评论 -
内外边距
内外边距四边外边距: 标签与标签之间的距离margin: 10px 上下左右均为 10pxmargin: 10px 20px 上下10 左右20margin: 10px 20px 30px 上10 左右20 下30marg...原创 2019-11-07 16:33:28 · 512 阅读 · 0 评论 -
行块级元素
行块级元素块级元素 block例如:div, p, h1~h6, li独占一行宽度默认与浏览器一致高度默认与内容一致宽高, 行高, 内外边距可以手动控制容纳性: 任何元素行级元素 inline例如:b,i,u,span,del,strong同在一行宽度默认与内容一致高度默认与内容一致行高, 内外的左右边距可以手动控制宽度,内外上下无法控制容纳性: 行级元...原创 2019-11-07 16:31:55 · 148 阅读 · 0 评论 -
盒子模型
盒子模型浏览器分类:IE浏览器: div组成由 内容(内边距+边框), 其余都是外边距非IE浏览器: div组成由 内容 + 内边距 + 边框, 其余都是外边距<style> .box{ width: 200px; height: 200px; padd...原创 2019-11-07 16:29:36 · 69 阅读 · 0 评论 -
字体图标
字体图标网页图片形式:img 直接拖拽到桌面background F12字体图标 自己下载阿里字体图标库: https://www.iconfont.cn/使用 阿里字体图标步骤:导入 iconfont.css需要用字体图标的标签赋予 class="iconfont"设置字体图标的 实体符号代码<li...原创 2019-11-07 16:28:31 · 90 阅读 · 0 评论 -
CSS_鼠标样式
鼠标样式属性名: cursor属性值:pointer 手掌text 文本default 默认, 箭头none 隐藏wait 等待move 坐标<style> .box{ width: 200px; height: 200px; ...原创 2019-11-07 16:18:22 · 122 阅读 · 0 评论 -
CSS_文本样式
文本text-indent: 首行缩进text-decoration: 文本划线 none underline overline line-through 划线也可以设置颜色 和 线型风格text-align: 水平对其方式 left center...原创 2019-11-07 16:15:20 · 86 阅读 · 0 评论 -
CSS_ 溢出
溢出四边属性名: overflow属性值:hidden 隐藏溢出的内容visible 显示溢出的内容auto 通过 滚动条 显示溢出的内容单边属性名:overflow-x属性名:overflow-y属性值:hidden 隐藏溢出的内容visible 显示溢出的内容auto ...原创 2019-11-07 16:07:02 · 71 阅读 · 0 评论 -
CSS_列表属性
列表属性list-style-type:设置或检索对象的列表项所使用的预设标记。list-style-position:设置或检索作为对象的列表项标记如何根据文本排列。list-style-image:设置或检索作为对象的列表项标记的图像。<style> li{ list-style: lower-roman;/*小写罗马数字*/ ...原创 2019-11-07 16:05:11 · 108 阅读 · 0 评论 -
CSS_盒子阴影
盒子阴影属性名: box-shadowbox-shadow: 10px 20px 30px 40px #ccc;10px: 水平位移 +:右 -:左20px: 垂直位移 +:下 -:上30px: 模糊度 不能为负数40px: 阴影面积0px 代表本身大小>0px 阴影面积越大<0px 阴影面积比原大小还小可省略, 默认为...原创 2019-11-07 16:01:42 · 173 阅读 · 0 评论 -
CSS_边框样式
边框四边属性名: border详细属性:border-color: 边框颜色border-width: 边框粗细 pxborder-style: 边框风格solid 实线, 常用none 没线, 常用double 双线dashed 虚线dotted 点线简写:border: [color] | [width] | style;所有的简写, 一...原创 2019-11-07 15:59:28 · 274 阅读 · 0 评论 -
CSS_背景
背景属性名: background详细属性:background-color: 背景颜色background-image: 背景图片url('图片地址')background-repeat: 背景重复no-repeat 取消重复background-position: 背景定位X Y x和y 代表水平轴和垂直轴正数:...原创 2019-11-07 15:50:13 · 59 阅读 · 0 评论 -
CSS_字体
字体属性名: font详细属性:font-size : 字体大小每个浏览器都有各自的默认值, 自己平时书写css时, 尽可能避免极限值font-family : 字体家族font-weight: bold | normal 加粗font-style: italic | normal 倾斜行高属性:line-...原创 2019-11-07 15:47:29 · 83 阅读 · 0 评论 -
CSS长度单位及优先级
长度单位绝对长度cm 厘米mm 毫米in 英寸相对长度px 像素% 百分比 相对于父级em 倍数1in = 2.54cm = 25.4mm = 96px优先级优先级: 权重越高的,优先级越高. 权重越低, 优先级越低.权重相同时, 谁离标签越近, 优先级越高 (就近原则)权重值:标签: 1class: 10id: 100...原创 2019-11-07 15:29:45 · 136 阅读 · 0 评论 -
CSS_选择器
基础选择器HTML 有4大通用属性style 给当前标签赋予css样式name 给当前标签取个名字class 给当前标签取个绰号 (重复, 多个)id 给当前标签取个身份证 (唯一)基础选择器标签选择格式: 标签名{ ... }特性: 影响整个网页的标签, 影响范围非常大, 适合css初始化类选择(class...原创 2019-11-07 15:23:07 · 126 阅读 · 0 评论 -
CSS_字体颜色
字体颜色属性名: color属性值:颜色单词十六进制#rgb 3种颜色的颜料#rrggbb 6个颜料 当两两相同时, 可简化为 #rgb rgb 的范围: 0~9 或 a~frgb()rgb(r, g, b)rgba(r, g, b, a)rgb 的范围: 0~255a 的范围: 0~1 可小数, ...原创 2019-11-07 15:14:42 · 426 阅读 · 0 评论 -
CSS基本语法
CSS基本语法文本格式:html扩展名: **.htmlcss扩展名: **.cssjavascript扩展名: **.jsPHP扩展名:**.phpMySQL扩展名: **.sqlcss绝大多数不区分大小写css 多个样式之间需要用 分号 隔开其中, 最后一个分号可以省略 (个人推荐: 全部加上)css 注释 /* */...原创 2019-11-07 15:11:44 · 80 阅读 · 0 评论 -
CSS导入方式
CSS导入方式Css: 层叠样式表, 专门负责修饰HTMLHTML 和 Css 是两门不同的技术, 但是经常放在一起用, 配合Js, 俗称: 网页三剑客HTML的属性 和 Css的属性是不一样css 4种导入方式:外链式 (外部导入, 正式项目)通过 link 标签导入css文件<link rel="stylesheet" href="css文件地址">内联式 ...原创 2019-11-07 15:10:09 · 241 阅读 · 0 评论