随笔分类 - web / CSS
摘要：私有前缀，浏览器测试使用的 chrome：-webkit- Safari：-webkit- Firefox：-moz- Edge：-webkit- 查询网站：https://caniuse.com/
阅读全文
摘要：ps: .item>.first{B}+h2{B$}*8 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial
阅读全文
摘要：验证给父元素加上border，不会出现 margin 塌陷问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
阅读全文
摘要：相对定位 相对定位相对的是自己原来的位置，开启相对定位的元素并没有脱离文档流，可以超出父容器的大小，与 float 区分 有四个属性值：left、bottom、right、top 左和右不能同时用，同时用时左生效； 当一个元素右定位属性，这个元素的层级高于普通的元素； 当两个元素都开启定位时，采用后
阅读全文
摘要：浮动 文字环绕图片 imag{float: left;} 文字环绕文字 使用伪元素选择器选出第一个元素，然后加一个float属性 浮动特点： 元素浮动之后脱离了原规则 浮动之后，宽与高默认被内容撑开，可以自己设置 浮动后与其他元素共用一行，按照 3D 角度想，浮动的元素是飘起来的 浮动的元素可以设置
阅读全文
摘要：元素之间的空白问题 行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符 去除换行和空格 给父元素 font-size: 0 再给需要显示的元素单独设置大小 行内块元素的空白问题 行内块元素与文本的基线对齐，基线不是最底端，故有一定的距离 解决： 给行内元素设置vertical，值不为b
阅读全文
摘要：行内元素、行内块元素，可以被父元素当作文本处理 例如：下列可以用于上述元素，text-align,line-height,text-indent 如何让子元素，在父亲中水平居中 若子元素是块元素，给父元素加上margin:0 auto; 若子元素是行内元素、行内块元素给父元素加上text-align
阅读全文
摘要：display 属性 display: none 不占用位置 visability 属性 visability: hidden 会占用位置
阅读全文
摘要：盒子模型：margin，boder，padding，content content min-width：底线宽度 max-width：最大宽度，看浏览器 min-height：底线高度 max-height：最大高度 默认宽度：当没有给 width 属性时候 内容区=父的content-自身的左右m
阅读全文
摘要：块元素 页面独占一行，默认宽度撑满父级元素，默认高度由内容撑开，可以设置 CSS 主体结构标签：<html>,<body> 排版元素：<h1>-<h6>，<hr>，<pr>，<pre>，<div> 列表元素：<ul>，<ol>，<li>，<dl>，<dt>，<dd>、 表格相关标签：<table>，
阅读全文
摘要：像素：px em：相当于当前元素 font-size 的倍数,1em = 1 * font-size 可以用于缩进，固定 2em rem：相当于标签元素 font-size 的倍数 %：相对于父元素的百分比
阅读全文
摘要：背景相关属性 背景颜色：backgroup-color: transparent; 默认值是透明 背景图片：backgroud-image: url(路径) 设置背景图片的重复方式：background-repeat: repeat-x no-repeat：不重复 repeat-y：垂直铺满 rep
阅读全文
摘要：列表相关属性 ul、ol、li标签中使用 <style> ul{ list-style-type: lower-roman; /*列表符号，常用值：none*/ list-style-position: inside; /*列表符号位置*/ list-style-image: url("路径");/
阅读全文
摘要：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_colors rgb 或 rgba color:rgb(255,255,255); color:rgba(255,255,255,0.7); rgba作用：具有透明效果，0完全透明，1不透明 三
阅读全文
摘要：文本间距 div.hello1{letter-spacing: 90px;} 字母间距 div.hello1{word-spacing: 90px;} 单词间距（根据空格来识别的） 文本修饰 div.hello1{text-decoration: 线的位置 线的类型 线的颜色} 例子： 上划线：di
阅读全文
摘要：层叠性：主要结果样式冲突 继承性：元素会拥有祖先元素的某些样式，优先继承离得近的，color 和 font-size 可以继承 优先级：!important > 行内样式 > id选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承样式
阅读全文
摘要：1. 通配选择器 作用：可以选中所有的 html 元素，对于清除样式有帮助 * {属性名：属性值} 2. 元素选择器 元素名 {属性名：属性值} 3. 类选择器 根据 class 来进行分类，类选择器需要用，使用频率很高 .class值{属性名：属性值} ps: 多个class需要用空格连接写在一起
阅读全文
摘要：行内样式 写在style属性中，行内样式只能控制当前样式对其他标签无效 <h1 style="color: red; font-size:80px">欢迎光临</h1> #并不推荐使用 内部样式 <head> <style> h1{ color: red; font-size:80px; } </s
阅读全文
