前端基础-CSS

CSS

　　CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

　　*** https://cdn.bootcss.com/normalize/8.0.1/normalize.css ### normalize 下载清除浏览器的默认设置导入即可用

CSS引入　　

　　1.直接写在标签里面 style='样式1;样式2;'；# 行内样式；行内式是在标记的style属性中设定CSS样式，不推荐大规模使用；
　　2.在head中通过style标签定义；# 内部样式
　　3.把样式单独写在css文件中，然后在html文件中通过link标签导入；# 外部样式

CSS语法：

　　每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
　　选择器{样式1；样式2}

CSS注释：

　　/这是注释/

CSS查找标签的方式(选择器)

　　元素选择器(标签选择器) # 适用于批量的\统一\默认的样式
　　　　标签名{样式1；样式2；}

　　ID选择器 # 适用于特定标签设置特殊的样式
　　　　# ID{样式1；样式2；}

　　类选择器 # 适用于给某一些标签设定相同样式
　　　　.类名{样式1；样式2；}
　　　　使用：标签 class='类名'
　　　　注意：
　　　　　　样式类名不要用数字开头（有的浏览器不认）。
　　　　　　标签中的class属性如果有多个，要用空格分隔。

　　通用选择器
　　　　*{样式1；样式2；}

　　组合选择器
　　　　后代选择器
　　　　　　选择器子标签{样式1；}

　　　　儿子选择器
　　　　　　选择器>子标签{样式1；}

　　　　毗邻选择器#同级相邻
　　　　　　选择器+子标签{样式1；}

　　　　弟弟选择器#同级所有
　　　　　　选择器~子标签{样式1；}

　　属性选择器

　　　　# 也可以在属性选择器前加上标签名缩小范围
　　　　　　div[class="xxx"]{样式1;}
　　　　# 也可以同时选择多个属性
　　　　　　[class='xxx'][title='xxx']{样式1;}

　　　　[属性]{样式1；}#用于选取带有指定属性的元素

　　　　[属性='值']{样式1；}#用于选取带有指定属性和值得元素

　　　　/找到所有title属性以hello开头的元素/
　　　　　　[title^="hello"] {color: red;}

　　　　/找到所有title属性以hello结尾的元素/
　　　　　　[title$="hello"] {color: yellow;}

　　　　/找到所有title属性中包含（字符串包含）hello的元素/
　　　　　　[title*="hello"] {color: red;}

　　　　/找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：/
　　　　　　[title~="hello"] {color: green;}

　　伪类选择器
　　　　/* 未访问的链接 */
　　　　　　a:link {color: #FF0000}

　　　　/* 已访问的链接 */
　　　　　　a:visited {color: #00FF00}

　　　　/* 鼠标移动到链接上并非a标签可用 */
　　　　　　a:hover {color: #FF00FF}

　　　　/* 选定的链接并非a标签可用*/
　　　　　　a:active {color: #0000FF}

　　　　/input输入框获取焦点时样式/　　　　　　

　　　　　　input:focus {
　　　　　　　　outline: none;#外边框
　　　　　　　　background-color: #eee;}#背景色

　　结构性伪类选择器
　　　　/父元素的第n个子元素/
　　　　　　div:nth-child(num)
　　　　/父元素的奇数个子元素/
　　　　　　div:nth-child(odd)
　　　　/匹配父元素的偶数个子元素/
　　　　　　div:nth-child(even)

　　反选伪类选择器
　　　　/匹配不符合当前选择器的任何元素/
　　　　　　div:not(选择器) # 在div下反选不符合选择器的内容

　　伪元素选择器
　　　　　　first-letter # 常用的给首字母设置特殊样式：
　　　　　　　　p:first-letter {
　　　　　　　　font-size: 48px;
　　　　　　　　color: red;}

　　　　　　before/在每个<p>元素之前插入内容/
　　　　　　　　p:before {
　　　　　　　　content:"*";
　　　　　　　　color:red;}

　　　　　　after/在每个<p>元素之后插入内容/
　　　　　　　　p:after {
　　　　　　　　content:"[?]";
　　　　　　　　color:blue;}

　　　　　　before和after多用于清除浮动。
　　　　　　脱离文档流：float，absolute，fixed

　　补充:content

　　　　伪类选择器中Content属性值
　　　　# content属性一般用于::before、::after伪元素中，用于呈现伪元素的内容
　　　　　　content: '插入纯字符'
　　　　　　content: url('插入图片地址')
　　　　　　content: attr(插入元素属性)
　　　　　　content: 调用方法()

　　选择器的优先级
　　　　1.内联样式(直接在标签里面写style)优先级最高
　　　　2.选择器相同的情况下，谁靠近标签谁生效
　　　　　　内联样式的权重为1000
　　　　　　id选择器的权重为100
　　　　　　类选择器的权重为10
　　　　　　元素选择器的权重为1
　　　　　　通用选择器的权重为0
　　　　　　权重计算永不进位

CSS属性分组

　　当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

　　　　选择器，选择器{样式1；}

CSS属性相关

　　宽和高

　　　　width属性可以为元素设置宽度。

　　　　height属性可以为元素设置高度。　　　　

　　　　补充:
　　　　　　line-height:容器高度保持一致 # 设置垂直居中

　　　　块级标签才能设置宽度，内联标签的宽度由内容来决定。

长度单位

　　rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。
　　# rem在根据指定html根元素的字符大小而定的，从IE6到Chrome中，默认根元素的font-size都是16px的。如果想要设置12px的字体大小也就是12px/16px = 0.75rem。

　　区别

　　　　由于px是相对固定单位，字号大写直接被定死，无法随着浏览器进行缩放。
　　　　em和rem都是相对单位，em是相对于其父元素的font-size，页面层级越深，em换算越复杂，麻烦。
　　　　rem直接相对于根元素html，避开层级关系，移动端新型浏览器对其支持较好。

　　box-shadow阴影用法
　　　　box-shadow:inset offset-x offset-y blur-radius spread-radius color,....;

　　　　box-shadow参数解释
　　　　　　@1：inset
　　　　　　　　有inset 则为内阴影，没有insert 则为外阴影，默认为外阴影。

　　　　　　@2：offset-x
　　　　　　　　横向阴影的大小，正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur-radius值会有模糊效果。

　　　　　　@3：offset-y
　　　　　　　　纵向阴影的大小，值同offset-x。

　　　　　　@4：blur-radius
　　　　　　　　阴影的模糊程度，值越大，阴影越模糊。

　　　　　　@5：spread-radius
　　　　　　　　阴影的扩大缩小，正值时，阴影扩大；负值时，阴影缩小，默认为0，和盒子同样大。

按钮实例
.shadowdemo{
    display:inline-block;
    line-height:33px;
    height:36px;
    padding:0 2em;
    font-size:13px;
    background:#0C58A7;
    box-shadow:inset -3px -3px 2px #050533;
    text-decoration: none;
    color:#fff;
    border-radius: 4px;
    vertical-align:middle;
}
.shadowdemo:active{
    line-height: 39px;
    box-shadow:inset 2px 3px 2px #050533;
}
<a href="javascript:;" class="shadowdemo">我是按钮</a>

　　字体属性　　　

　　　　文字字体
　　　　　　font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
　　　　　　例如：
　　　　　　　　body {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}　

　　　　字体大小
　　　　　　font-size:num px;
　　　　　　如果设置成 inherit 表示继承父元素的字体大小值。

　　　　字体倾斜
　　　　　　font-style:
　　　　　　值　　　　　　描述
　　　　　　normal 　　　　默认值。浏览器显示一个标准的字体样式。
　　　　　　italic 　　　　　浏览器会显示一个斜体的字体样式。
　　　　　　oblique 　　　　浏览器会显示一个倾斜的字体样式。
　　　　　　inherit 　　　　规定应该从父元素继承字体样式。

　　　　字重(粗细)
　　　　　　font-weight用来设置字体的字重（粗细）。
　　　　　　值　　　　　　描述
　　　　　　normal 　　　默认值，标准粗细
　　　　　　bold 　　　　　粗体
　　　　　　bolder 　　　　更粗
　　　　　　lighter 　　　　更细

　　　　　　100~900 设置具体粗细，400等同于normal，而700等同于bold
　　　　　　inherit 继承父元素字体的粗细值

　　　文本颜色 color
　　　　　　颜色属性被用来设置文字的颜色。
　　　　　　颜色是通过CSS最经常的指定：
　　　　　　　　#在浏览器检查 ctrl + shift +c 选中文本样式找color 可以找色盘
　　　　　　十六进制值 - 如: ＃FF0000
　　　　　　一个RGB值 - 如: RGB(255,0,0)
　　　　　　颜色的名称 - 如: red
　　　　　　还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

　　　　文字属性
　　　　　　文字对齐
　　　　　　　　text-align 属性规定元素中的文本的水平对齐方式。

　　　　　　　　值　　　　　　描述
　　　　　　　　left 　　　　　左边对齐默认值
　　　　　　　　right 　　　　右对齐
　　　　　　　　center 　　　　居中对齐
　　　　　　　　justify 　　　　两端对齐

　　　　文字装饰
　　　　　　text-decoration 属性用来给文字添加特殊效果。

　　　　　　　　值　　　　　　描述
　　　　　　　　none 　　　　　默认。定义标准的文本。
　　　　　　　　underline 　　　定义文本下的一条线。
　　　　　　　　overline 　　　定义文本上的一条线。
　　　　　　　　line-through 　定义穿过文本下的一条线。
　　　　　　　　inherit 　　　　继承父元素的text-decoration属性的值。

　　　　　　　　常用的为去掉a标签默认的自划线：
　　　　　　　　a {text-decoration: none;}

　　　　首行缩进
　　　　　　将段落的第一行缩进 32像素：
　　　　　　p {text-indent: 32px;}

　　　　img相关
　　　　　　clip 属性剪裁绝对定位元素。
　　　　　　# 这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

　　　　　　值　　　　　　描述
　　　　　　shape 　　　　设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
　　　　　　auto 　　　　　默认值。不应用任何剪裁。
　　　　　　inherit 　　　　规定应该从父元素继承 clip 属性的值。

　　　　　　Ps: 需要先进行定位

　　　　背景属性
　　　　　　使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
　　　　　　/背景颜色/
　　　　　　　　background-color: red;
　　　　　　***补充
　　　　　　background-color: red!important #设置优先级最高

　　　　　　/背景图片/
　　　　　　　　background-image: url('1.jpg');

　　　　　　/背景图片尺寸/
　　　　　　　　background-size: 100% 100%

　　　　　　/*
　　　　　　背景重复
　　　　　　　　repeat(默认):背景图片平铺排满整个网页

　　　　　　　　repeat-x：背景图片只在水平方向上平铺
　　　　　　　　repeat-y：背景图片只在垂直方向上平铺
　　　　　　　　no-repeat：背景图片不平铺
　　　　　　*/
　　　　　　　　background-repeat: no-repeat; #背景不重复

　　　　　　/背景位置/
　　　　　　　　background-position: right top; # 出现在右上角根据不同情况调节如果中间需要设置 center center
　　　　　　　　/background-position: 200px 200px;/ # 像素大小或百分比；
　　　　　　　　background-attachment:fixed; # 固定背景图片

　　　　　　支持简写：
　　　　　　　　background:#ffffff url('1.png') no-repeat right top;

　　边框
　　　　边框属性：
　　　　　　border-width # 宽度
　　　　　　border-style # 样式
　　　　　　border-color # 颜色

　　　　支持简写
　　　　　　# i1 {border: 2px solid red;}

　　　　边框样式
　　　　　　值　　　　　　描述
　　　　　　none 　　　　无边框。
　　　　　　dotted 　　　点状虚线边框。
　　　　　　dashed 　　　矩形虚线边框。
　　　　　　solid 　　　　　实线边框。

　　　　　　除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

　　　　　　　　#i1 {
　　　　　　　　　　border-top-style:dotted;
　　　　　　　　　　border-right-style:solid;
　　　　　　　　　　border-bottom-style:dotted;
　　　　　　　　　　border-left-style:none;
　　　　　　　　　　}

　　　　　　border-radius # 用这个属性能实现圆角边框的效果。将border-radius设置为长或高的一半即可得到一个圆形。设置100%

　　　　display属性
　　　　　　用于控制HTML元素的显示效果

　　　　　　值　　　　　　　　　　　　　　　　意义
　　　　　　display:"none" 　　　　　　　　　　HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
　　　　　　display:"block" 　　　　　　　　　快级标签默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。(菜单里面的a标签可以设置block)
　　　　　　display:"inline" 　　　　　　　　　按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
　　　　　　display:"inline-block" 　　　　　　使元素同时具有行内元素和块级元素的特点。

　　　　　　display:"none"与visibility:hidden的区别：
　　　　　　　　visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

　　　　　　　　display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

　　　　补充:
　　　　　　display:flex 布局

　　　　X轴称为主轴
　　　　Y轴交叉轴

　　　　　　　　display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

　　　　　　　　Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

　　　　　　　　flex的六个属性
　　　　　　　　　　flex-direction 决定主轴的方向（即项目的排列方向）
　　　　　　　　　　　　1：flex-direction:row; 主轴水平方向，起点在左端　　　　　　　　　

　　　　　　　　　　　　2 : flex-direction:row-reverse；主轴水平方向，起点在右端

　　　　　　　　　　　　3：flex-direction:column; 主轴垂直方向，起点在上边沿

　　　　　　　　　　　　4：flex-direction:row-reverse;主轴垂直方向，起点在下边沿

　　　　　　　　　　flex-wrap 定义换行情况(默认不换行)
　　　　　　　　　　　　1：flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；

　　　　　　　　　　　　2：flex-wrap: wrap; 元素换行第一行在下方,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；

　　　　　　　　　　　　3 : flex-warp: warp-reverse; 元素换行第一行在下方

　　　　　　　　　　justify-content 定义项目在主轴上的对齐方式
　　　　　　　　　　　　1：justify-content : center ; 居中对齐

　　　　　　　　　　　　2：justify-content : flex-start; 左对齐

　　　　　　　　　　　　3：justify-content : flex-end;右对齐

　　　　　　　　　　　　4：justify-content : space-between;两端对齐，项目之间间隔相等

　　　　　　　　　　　　5：justify-content : space-around;每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍

　　　　　　　　　　align-items 定义在交叉轴上的对齐方式
　　　　　　　　　　　　1：align-items : flex-start; 起点对齐

　　　　　　　　　　　　2：align-items : flex-end; 终点对齐

　　　　　　　　　　　　3：align-items : center; 中点对齐

　　　　　　　　　　　　4：align-items : baseline; 项目的第一行文字的基线对齐

　　　　　　　　　　　　5 : align-items : stretch ; (默认值) 如果项目未设置高度或设为auto，将占满整个容器的高度。

　　　　　　　　　　align-content 定义多根轴线的对齐方式

　　　　　　　　　　　　如果项目只有一根轴线，该属性不起作用。
　　　　　　　　　　　　所以，容器必须设置flex-wrap：···；

　　　　　　　　　　　　1:align-content: flex-start; 与交叉轴的起点对齐。

　　　　　　　　　　　　2:align-content: flex-end; 与交叉轴的终点对齐。

　　　　　　　　　　　　3:align-content: stretch; 轴线占满整个交叉轴。

　　　　　　　　　　　　4:align-content: center; 默认值。与交叉轴的中点对齐

　　　　　　　　　　　　5:align-content: space-between;与交叉轴的两端对齐，轴线之间的间隔平均分布；

　　　　　　　　　　　　6:align-content: space-around;每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍；

　　　　　　　　flex常见属性总结

　　　　　　　　　　Positional alignment
　　　　　　　　　　　　justify-content: center; :居中排列
　　　　　　　　　　　　justify-content: flex-start; /* 从行首起始位置开始排列 /
　　　　　　　　　　　　justify-content: flex-end; / 从行尾位置开始排列 */

　　CSS盒子属性 # 从里到外
　　　　Content(内容): 盒子的内容，显示文本和图像；
　　　　padding: 用于控制内容与边框之间的距离；
　　　　Border(边框): 围绕在内边距和内容外的边框。
　　　　margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。　　　　

　　　　***不同的浏览器会自动留不同的padding，margin 所以我们需要在head设置
　　　　　　*{margin ：0；padding：0；}

　　　　padding内填充
　　　　　　.padding-test {
　　　　　　padding-top: 5px;
　　　　　　padding-right: 10px;
　　　　　　padding-bottom: 15px;
　　　　　　padding-left: 20px;
　　　　　　　　}

　　　　　　推荐使用简写：

　　　　　　.padding-test {
　　　　　　　　padding: 5px 10px 15px 20px;
　　　　　　　　}
　　　　　　顺序：上右下左

　　　　　　补充padding的常用简写方式：

　　　　　　　　提供一个，用于四边；
　　　　　　　　提供两个，第一个用于上－下，第二个用于左－右；
　　　　　　　　如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
　　　　　　　　提供四个参数值，将按上－右－下－左的顺序作用于四边；

　　　　margin外边距
　　　　　　.margin-test {
　　　　　　margin-top:5px;
　　　　　　margin-right:10px;
　　　　　　margin-bottom:15px;
　　　　　　margin-left:20px;
　　　　　　　　}

　　　　　　推荐使用简写：

　　　　　　.margin-test {
　　　　　　　　margin: 5px 10px 15px 20px;
　　　　　　　　}
　　　　　　顺序：上右下左

　　　　　　常见居中：
　　　　　　.mycenter {
　　　　　　　　margin: 0 auto;
　　　　　　　　} #上下为0 左右为自动

　　　　　　margin: auto # 用于容器居中水平有效

　　　　　　补充: 居中
　　　　　　　　style="text-align: center;

　　float
　　　　在 CSS 中，任何元素都可以浮动。
　　　　浮动元素会生成一个块级框，而不论它本身是何种元素。

　　　　关于浮动的两个特点：
　　　　　　浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
　　　　　　由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

　　　　三种取值：
　　　　　　left：向左浮动

　　　　　　right：向右浮动

　　　　　　none：默认值，不浮动

　　　　Ps: 浮动元素的重叠问题
　　　　　　1.浮动元素不会覆盖文字内容
　　　　　　2.浮动元素不会覆盖图片内容
　　　　　　　　# 因为图片本身也属于文本,可以将图片看做一个特殊的文字
　　　　　　3.浮动元素不会覆盖表单元素
　　　　　　　　# 输入框,单选按钮,复选框,按钮,下拉选择框等

　　　　Ps: 浮动元素在排列时,只参考前一个元素位置即可

　　　clear
　　　　　clear属性规定元素的哪一侧不允许其他浮动元素。
　　　　　注意：clear属性只会对自身起作用，而不会影响其他元素。

　　　　　值　　　　　　　　描述
　　　　　left 　　　　　　　在左侧不允许浮动元素。
　　　　　right 　　　　　　在右侧不允许浮动元素。
　　　　　both 　　　　　　在左右两侧均不允许浮动元素。
　　　　　none 　　　　　　默认值。允许浮动元素出现在两侧。
　　　　　inherit 　　　　　　规定应该从父元素继承 clear 属性的值。

　　　　　清除浮动
　　　　　　　清除浮动的副作用（父标签塌陷问题）
　　　　　　　主要有三种方式：

　　　　　　　　　固定高度
　　　　　　　　　伪元素清除法
　　　　　　　　　overflow:hidden
　　　　　　　　　伪元素清除法（使用较多）：

　　　　　　　　　　　.clearfix:after {
　　　　　　　　　　　　　content: "";
　　　　　　　　　　　　　display: block;
　　　　　　　　　　　　　clear: both;
　　　　　　　　　　　　　}

　　　overflow溢出属性
　　　　值　　　　　　描述
　　　　visible 　　　　默认值。内容不会被修剪，会呈现在元素框之外。
　　　　hidden 　　　内容会被修剪，并且其余内容是不可见的。
　　　　scroll 　　　　内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
　　　　auto 　　　　如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
　　　　inherit 　　　规定应该从父元素继承 overflow 属性的值。

　　　　　　overflow（水平和垂直均设置）
　　　　　　overflow-x（设置水平方向）
　　　　　　overflow-y（设置垂直方向）

　　定位（position）

　　　　static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

　　　　relative（相对定位）
　　　　　　相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
　　　　　　注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

　　　　absolute（绝对定位）
　　　　　　定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

　　　　　　重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

　　　　　　另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义

　　　　　　****top，right，bottom，left =0 默认铺满整个屏幕

　　　　　　***top=50% left=50% margin-top=一半宽 margin-left=一半长居中

　　　　fixed（固定）
　　　　　　fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
　　　　　　在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

　　opacity # 透明度
　　　　用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

　　　　注意：与rgba()区别:
　　　　　　opacity改变元素\子元素的透明效果
　　　　　　rgba()只改变当前透明效果

　　设置对象的层叠顺序。
　　　　z-index 值表示谁压着谁，数值大的压盖住数值小的，
　　　　只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
　　　　z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
　　　　从父现象：父亲怂了，儿子再牛逼也没用

　　　　　　z-index
　　　　　　　　#i2 {
　　　　　　　　z-index: 999;
　　　　　　　　}

posted @ 2019-11-06 16:22 Binb 阅读(579) 评论(0) 编辑收藏举报

刷新页面返回顶部

Binb

前端基础-CSS

CSS

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

*** https://cdn.bootcss.com/normalize/8.0.1/normalize.css ### normalize 下载清除浏览器的默认设置 导入即可用

CSS引入

CSS语法：

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 选择器{样式1；样式2}

CSS注释：

/*这是注释*/

CSS查找标签的方式(选择器)

元素选择器(标签选择器) # 适用于 批量的\统一\默认的样式 标签名{样式1；样式2；}

ID选择器 # 适用于特定标签设置特殊的样式 # ID{样式1；样式2；}

类选择器 # 适用于给某一些标签设定相同样式 .类名{样式1；样式2；} 使用：标签 class='类名' 注意： 样式类名不要用数字开头（有的浏览器不认）。 标签中的class属性如果有多个，要用空格分隔。

通用选择器 *{样式1；样式2；}

组合选择器 后代选择器 选择器 子标签{样式1；}

儿子选择器 选择器>子标签{样式1；}

毗邻选择器#同级相邻 选择器+子标签{样式1；}

弟弟选择器#同级所有 选择器~子标签{样式1；}

属性选择器

# 也可以在属性选择器前加上标签名缩小范围 div[class="xxx"]{样式1;} # 也可以同时选择多个属性 [class='xxx'][title='xxx']{样式1;}

[属性]{样式1；}#用于选取带有指定属性的元素

[属性='值']{样式1；}#用于选取带有指定属性和值得元素

/*找到所有title属性以hello开头的元素*/ [title^="hello"] {color: red;}

/*找到所有title属性以hello结尾的元素*/ [title$="hello"] {color: yellow;}

/*找到所有title属性中包含（字符串包含）hello的元素*/ [title*="hello"] {color: red;}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ [title~="hello"] {color: green;}

伪类选择器 /* 未访问的链接 */ a:link {color: #FF0000}

/* 已访问的链接 */ a:visited {color: #00FF00}

/* 鼠标移动到链接上 并非a标签可用 */ a:hover {color: #FF00FF}

/* 选定的链接 并非a标签可用*/ a:active {color: #0000FF}

/*input输入框获取焦点时样式*/

input:focus { outline: none;#外边框 background-color: #eee;}#背景色

结构性伪类选择器 /*父元素的第n个子元素*/ div:nth-child(num) /*父元素的奇数个子元素*/ div:nth-child(odd) /*匹配父元素的偶数个子元素*/ div:nth-child(even)

反选伪类选择器 /*匹配不符合当前选择器的任何元素*/ div:not(选择器) # 在div下反选 不符合选择器的内容

伪元素选择器 first-letter # 常用的给首字母设置特殊样式： p:first-letter { font-size: 48px; color: red;} before/*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red;}

after/*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue;}

before和after多用于清除浮动。 脱离文档流：float，absolute，fixed

补充:content

伪类选择器中Content属性值 # content属性一般用于::before、::after伪元素中，用于呈现伪元素的内容 content: '插入纯字符' content: url('插入图片地址') content: attr(插入元素属性) content: 调用方法()

CSS属性分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

选择器，选择器{样式1；}

CSS属性相关

宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

补充: line-height:容器高度保持一致 # 设置垂直居中

块级标签才能设置宽度，内联标签的宽度由内容来决定。

区别

box-shadow阴影用法 box-shadow:inset offset-x offset-y blur-radius spread-radius color,....;

box-shadow参数解释 @1：inset 有inset 则为内阴影，没有insert 则为外阴影，默认为外阴影。 @2：offset-x 横向阴影的大小，正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur-radius值会有模糊效果。

@3：offset-y 纵向阴影的大小，值同offset-x。

@4：blur-radius 阴影的模糊程度，值越大，阴影越模糊。

@5：spread-radius 阴影的扩大缩小，正值时，阴影扩大；负值时，阴影缩小，默认为0，和盒子同样大。

字体属性

文字字体 font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。 例如： body {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}

字体大小 font-size:num px; 如果设置成 inherit 表示继承父元素的字体大小值。

字体倾斜 font-style: 值 描述 normal 默认值。浏览器显示一个标准的字体样式。 italic 浏览器会显示一个斜体的字体样式。 oblique 浏览器会显示一个倾斜的字体样式。 inherit 规定应该从父元素继承字体样式。

字重(粗细) font-weight用来设置字体的字重（粗细）。 值 描述 normal 默认值，标准粗细 bold 粗体 bolder 更粗 lighter 更细

100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值

文字属性 文字对齐 text-align 属性规定元素中的文本的水平对齐方式。

值 描述 left 左边对齐 默认值 right 右对齐 center 居中对齐 justify 两端对齐

文字装饰 text-decoration 属性用来给文字添加特殊效果。

值 描述 none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 inherit 继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线： a {text-decoration: none;}

首行缩进 将段落的第一行缩进 32像素： p {text-indent: 32px;}

值 描述 shape 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) auto 默认值。不应用任何剪裁。 inherit 规定应该从父元素继承 clip 属性的值。

Ps: 需要先进行定位

背景属性 使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。 /*背景颜色*/ background-color: red; ***补充 background-color: red!important #设置优先级最高

/*背景图片*/ background-image: url('1.jpg');

/*背景图片尺寸*/ background-size: 100% 100%

/* 背景重复 repeat(默认):背景图片平铺排满整个网页

repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺 */ background-repeat: no-repeat; #背景不重复

/*背景位置*/ background-position: right top; # 出现在右上角 根据不同情况调节 如果中间需要设置 center center /*background-position: 200px 200px;*/ # 像素大小或百分比； background-attachment:fixed; # 固定背景图片

支持简写： background:#ffffff url('1.png') no-repeat right top;

边框 边框属性： border-width # 宽度 border-style # 样式 border-color # 颜色

支持简写 # i1 {border: 2px solid red;}

边框样式 值 描述 none 无边框。 dotted 点状虚线边框。 dashed 矩形虚线边框。 solid 实线边框。

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

　　CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

　　*** https://cdn.bootcss.com/normalize/8.0.1/normalize.css ### normalize 下载清除浏览器的默认设置导入即可用

CSS引入　　

　　每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
　　选择器{样式1；样式2}

　　/这是注释/

　　元素选择器(标签选择器) # 适用于批量的\统一\默认的样式
　　　　标签名{样式1；样式2；}

　　ID选择器 # 适用于特定标签设置特殊的样式
　　　　# ID{样式1；样式2；}

　　通用选择器
　　　　*{样式1；样式2；}

　　组合选择器
　　　　后代选择器
　　　　　　选择器子标签{样式1；}

　　　　儿子选择器
　　　　　　选择器>子标签{样式1；}

　　　　毗邻选择器#同级相邻
　　　　　　选择器+子标签{样式1；}

　　　　弟弟选择器#同级所有
　　　　　　选择器~子标签{样式1；}

　　属性选择器

　　　　# 也可以在属性选择器前加上标签名缩小范围
　　　　　　div[class="xxx"]{样式1;}
　　　　# 也可以同时选择多个属性
　　　　　　[class='xxx'][title='xxx']{样式1;}

　　　　[属性]{样式1；}#用于选取带有指定属性的元素

　　　　[属性='值']{样式1；}#用于选取带有指定属性和值得元素

　　　　/找到所有title属性以hello开头的元素/
　　　　　　[title^="hello"] {color: red;}

　　　　/找到所有title属性以hello结尾的元素/
　　　　　　[title$="hello"] {color: yellow;}

　　　　/找到所有title属性中包含（字符串包含）hello的元素/
　　　　　　[title*="hello"] {color: red;}

　　　　/找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：/
　　　　　　[title~="hello"] {color: green;}

　　伪类选择器
　　　　/* 未访问的链接 */
　　　　　　a:link {color: #FF0000}

　　　　/* 已访问的链接 */
　　　　　　a:visited {color: #00FF00}

　　　　/* 鼠标移动到链接上并非a标签可用 */
　　　　　　a:hover {color: #FF00FF}

　　　　/* 选定的链接并非a标签可用*/
　　　　　　a:active {color: #0000FF}

　　　　/input输入框获取焦点时样式/　　　　　　

　　　　　　input:focus {
　　　　　　　　outline: none;#外边框
　　　　　　　　background-color: #eee;}#背景色

　　结构性伪类选择器
　　　　/父元素的第n个子元素/
　　　　　　div:nth-child(num)
　　　　/父元素的奇数个子元素/
　　　　　　div:nth-child(odd)
　　　　/匹配父元素的偶数个子元素/
　　　　　　div:nth-child(even)

　　反选伪类选择器
　　　　/匹配不符合当前选择器的任何元素/
　　　　　　div:not(选择器) # 在div下反选不符合选择器的内容

　　　　　　after/在每个<p>元素之后插入内容/
　　　　　　　　p:after {
　　　　　　　　content:"[?]";
　　　　　　　　color:blue;}

　　　　　　before和after多用于清除浮动。
　　　　　　脱离文档流：float，absolute，fixed

　　补充:content

　　当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

　　　　选择器，选择器{样式1；}

　　宽和高

　　　　width属性可以为元素设置宽度。

　　　　height属性可以为元素设置高度。　　　　

　　　　补充:
　　　　　　line-height:容器高度保持一致 # 设置垂直居中

　　　　块级标签才能设置宽度，内联标签的宽度由内容来决定。

　　区别

　　box-shadow阴影用法
　　　　box-shadow:inset offset-x offset-y blur-radius spread-radius color,....;

　　　　　　@3：offset-y
　　　　　　　　纵向阴影的大小，值同offset-x。

　　　　　　@4：blur-radius
　　　　　　　　阴影的模糊程度，值越大，阴影越模糊。

　　　　　　@5：spread-radius
　　　　　　　　阴影的扩大缩小，正值时，阴影扩大；负值时，阴影缩小，默认为0，和盒子同样大。

　　字体属性　　　

　　　　字体大小
　　　　　　font-size:num px;
　　　　　　如果设置成 inherit 表示继承父元素的字体大小值。

　　　　　　100~900 设置具体粗细，400等同于normal，而700等同于bold
　　　　　　inherit 继承父元素字体的粗细值

　　　　文字属性
　　　　　　文字对齐
　　　　　　　　text-align 属性规定元素中的文本的水平对齐方式。

　　　　　　　　值　　　　　　描述
　　　　　　　　left 　　　　　左边对齐默认值
　　　　　　　　right 　　　　右对齐
　　　　　　　　center 　　　　居中对齐
　　　　　　　　justify 　　　　两端对齐

　　　　文字装饰
　　　　　　text-decoration 属性用来给文字添加特殊效果。

　　　　　　　　常用的为去掉a标签默认的自划线：
　　　　　　　　a {text-decoration: none;}

　　　　首行缩进
　　　　　　将段落的第一行缩进 32像素：
　　　　　　p {text-indent: 32px;}

　　　　　　Ps: 需要先进行定位

　　　　　　/背景图片/
　　　　　　　　background-image: url('1.jpg');

　　　　　　/背景图片尺寸/
　　　　　　　　background-size: 100% 100%

　　　　　　/*
　　　　　　背景重复
　　　　　　　　repeat(默认):背景图片平铺排满整个网页

　　　　　　　　repeat-x：背景图片只在水平方向上平铺
　　　　　　　　repeat-y：背景图片只在垂直方向上平铺
　　　　　　　　no-repeat：背景图片不平铺
　　　　　　*/
　　　　　　　　background-repeat: no-repeat; #背景不重复

　　　　　　支持简写：
　　　　　　　　background:#ffffff url('1.png') no-repeat right top;

　　边框
　　　　边框属性：
　　　　　　border-width # 宽度
　　　　　　border-style # 样式
　　　　　　border-color # 颜色

　　　　支持简写
　　　　　　# i1 {border: 2px solid red;}

　　　　边框样式
　　　　　　值　　　　　　描述
　　　　　　none 　　　　无边框。
　　　　　　dotted 　　　点状虚线边框。
　　　　　　dashed 　　　矩形虚线边框。
　　　　　　solid 　　　　　实线边框。

　　　　　　除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

　　　　　　　　#i1 {
　　　　　　　　　　border-top-style:dotted;
　　　　　　　　　　border-right-style:solid;
　　　　　　　　　　border-bottom-style:dotted;
　　　　　　　　　　border-left-style:none;
　　　　　　　　　　}

　　　　　　border-radius # 用这个属性能实现圆角边框的效果。将border-radius设置为长或高的一半即可得到一个圆形。设置100%

　　　　display属性
　　　　　　用于控制HTML元素的显示效果

　　　　　　display:"none"与visibility:hidden的区别：
　　　　　　　　visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

　　　　　　　　display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

　　　　补充:
　　　　　　display:flex 布局

　　　　X轴称为主轴
　　　　Y轴交叉轴

　　　　　　　　display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

　　　　　　　　Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

　　　　　　　　flex的六个属性
　　　　　　　　　　flex-direction 决定主轴的方向（即项目的排列方向）
　　　　　　　　　　　　1：flex-direction:row; 主轴水平方向，起点在左端　　　　　　　　　

　　　　　　　　　　　　2 : flex-direction:row-reverse；主轴水平方向，起点在右端

　　　　　　　　　　　　3：flex-direction:column; 主轴垂直方向，起点在上边沿

　　　　　　　　　　　　4：flex-direction:row-reverse;主轴垂直方向，起点在下边沿

　　　　　　　　　　　　3 : flex-warp: warp-reverse; 元素换行第一行在下方

　　　　　　　　　　align-items 定义在交叉轴上的对齐方式
　　　　　　　　　　　　1：align-items : flex-start; 起点对齐

　　　　　　　　　　　　2：align-items : flex-end; 终点对齐

　　　　　　　　　　　　3：align-items : center; 中点对齐

　　　　　　　　　　　　4：align-items : baseline; 项目的第一行文字的基线对齐

　　　　　　　　　　　　5 : align-items : stretch ; (默认值) 如果项目未设置高度或设为auto，将占满整个容器的高度。