CSS
- CSS:层叠样式表(Cascading Style Sheets) 修饰网页,且能配合js对原有样式进行更改。
- css的层叠性:一个元素可能同时被多个css选择器选中,每个选择器都有一些css规则,这就是层叠。 这些规则有可能不矛盾的,自然这些规则将会同时起效,然而有些规则是相互冲突的。当发生冲突的时候必须选出一条最高特殊性(权重)的规则来应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入外部css rel用于定义文档关联,表示关联样式表 type定义文档类型 -->
<link rel="stylesheet" href="../css/1.css" type="text/css">
<!-- 内部编写css -->
<style>
div {
background-color: brown;
color: #fff;
font-size: 66px;
}
</style>
</head>
<body>
<!-- 行内样式 -->
<div style="width:500px; height: 500px;">今晚月亮真美</div>
</body>
</html>
目录- CSS
- 语法
- 引入方式
- CSS选择器
- 伪类
- 文字样式
- ffffff
- cccccc
- 123123
- ff1122==>#f12
- 背景
- ffffff
- cccccc
- 123123
- ff1122==>#f12
- 列表
- 表格
- 浮动float
- 边框 border
- 间距
- 盒子模型 组成content+padding+border+margin
- 盒子溢出overflow:;
- 元素类型
- 定位 position:;
- 宽高自适应
- 布局
- BFC 块级格式化上下文(block formatting contexts)
语法
选择器{
属性:属性值;
属性:属性值;
.....
}
引入方式
行内样式 直接在标签里面书写
-
<标签名 style=" 属性:属性值;属性:属性值;...."></标签名>
- 优点:
- 方便简介
- 缺点:
- 只能修饰一个标签,重复性高
- 结构和样式在一起,代码杂乱
- 不利于后期维护
- 优点:
内部样式 在head头部部分书写
-
<head><style>选择器{属性:属性值;属性:属性值;...}</style></head>
- 优点:
- 结构和样式分离,
- 缺点:
- 在同一个页面,不太方便操作
- 优点:
外部样式 在外面创建css文件,在html中引入css文件
-
<head><link rel="stylesheet" href="css文件名" type="text/css"></head>
- 做到了结构和样式分离,方便后期维护;是日常开发中最常用的方式
特殊外部引入 在head头部书写
-
<head><style>@import url("css文件名")</style></head>
-
面试题:
@import引入外部样式和通过link标签引入外部样式的区别?- @import的方式是属于css的语法,必须写在style标签里面。
- 加载顺序不同,link引入的css样式表是同步加载的,而@import这种 方式是先加载页面,再加
载样式。在网速差的时候有区别。 - 浏览器的支持情况不同。@import引入的样式在老版本浏览器(ie5以下)中不被支持
- Dom操作不同。通过@import导入的样式,是不同通过Dom操作改变样式的
-
引入效果的权重 (就近原则)
-
同一个标签同时用三种样式表:行内>外部和内部
-
同一个标签同时用外部和内部:就近原则,css与对象直线距离最近
-
如何让外部样式比行内样式的权重?
-
在外部样式需要提升权重的属性值后,分号前写入 !important
-
div{ background-color: green!important; }
-
CSS选择器
基本选择器
- 标签选择器 div{color:red:}
- class选择器 <div class="box”> .div{color: brown;}
- id选择器(全局只使用一次) <div id="box”> #div{color: brown;}
- 通配符选择器 *{ }
- 群组选择器 .box,.box1,.box2{ }
层次选择器
- 后代选择器(包括所有叫div的子孙后代) .box div{}
- 子代选择器 所有叫div的儿子 .box>div{}
- 相邻兄弟 选择器1+选择器2{} 后面的一个兄弟 .div+.div1{}
- 通用兄弟 选择器1~选择器2{} .box .p1~.p6{}
伪类选择器
属性选择器
伪对象(伪元素)选择器
选择器权重
层叠性:当属性相同时,遵循就近原则。当属性不同时,进行叠加。
选择器的权重值:
* 0000
div 0001
.box 0010
#box 0100
行类样式 1000
!important 10000
.box div 10+1
- id选择器>标签选择器
- id选择器>class选择器
- class选择器>标签选择器
- 标签选择器>通配符选择器
伪类
a:link {
color: tomato;
}
a:visited {
color: gold;
}
a:hover{
color: green;
}
a:active{
color:aqua;
}
- 选择器:link{} 实现点击前效果
- 选择器:visited{} 实现点击后效果
- 选择器:hover{} 实现鼠标经过效果
- 选择器:active{} 鼠标点下到鼠标松开的效果
- 同时使用时,顺序不能改变l-v-h-a
- a标签点击前是蓝色,点击后是紫色
文字样式
文字大小 font-size:;
说明:
1) 属性值为数值型时,必须给属性值加单位,属性值为0时除外。
2)单位还可以是pt,9pt=12px;
3)为了减小系统间的字体显示差异,IE Netscape Mozilla的浏览器制作商于1999年召开会议,共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下,1em=16px,0.75em=12px; rem
4)使用绝对大小关键字
xx-small =9px
x-small =11px
small =13px
medium =16px
large =19px
x-large =23px
xx-large =27px
文字颜色 color: ;
- red
- 十六进制
- A-F 1-9进行6位数组合
-
ffffff
-
cccccc
-
123123
-
ff1122==>#f12
-
- A-F 1-9进行6位数组合
- rgba(red,green,blue,alpha)
- alpha 取值范围 0-1 0透明 1不透明
- red,green,blue取值范围0-255
文字字体:font-family:;
- 可以同时引入多个字体,字体之间用逗号隔开
- 默认从左边第一个开始识别,遇到能识别的字体就进行显示,如果都不能识别就显示浏览器默认字体(微软雅黑)
- 字体由多个单词构成或者中文字体需要用引号包括
- 中文字体和英文字体同时引入时,需要把英文字体靠左边
文字加粗: font-weight:;
- 关键词
- bold加粗
- bolder更粗(效果和bold一样,强调)
- normal 常规
- lighter 轻量的,细体
- 数值
- 取值范围100-900
- 400以下细体
- 600以上粗体
文字倾斜:font-style:;
- italic 倾斜
- oblique 倾斜(如果italic不生效就用oblique)
- normal 常规的
首行缩进:text-indent:;
-
em是相对单位,相当于文本大小
-
如果文字大小为16px,则1em=16px
文本水平对齐: text-align:;
- left
- right
- center
- justify 两端对齐
- text-align-last:justify;单行两端对齐
行高: line-height:;(两行文字基线到基线的距离)
- 顶线
- 中线
- 基线
- 底线
- line-height:height; 只有一行文本时,行高=高可实现文本垂直居中
- 行高=1时可以清除行高
字符字间隙:letter-spacing:;
单词词间距:word-spacing:;
(上划,下划,删除)线 text-decoration:;
- overline 上划线
- underline 下划线
- line-through 删除线
- none 取消所有线
- 三线共行: text-decoration:overline underline line-through;
文字样式的复合写法:
- font:倾斜 加粗 字号/行高 字体样式;
- 例:font:italic bold 16px/16px '楷体';
- 注意:不能改变其顺序,且最少需要同时设置字号和字体样式
背景
背景颜色background-color:;
- 关键词: red
- 十六进制
- A-F 1-9进行6位数组合
-
ffffff
-
cccccc
-
123123
-
ff1122==>#f12
-
- A-F 1-9进行6位数组合
- rgba(red,green,blue,alpha)
- alpha 取值范围 0-1 0透明 1不透明
- red,green,blue取值范围0-255
背景图片 background-image:url();
- 不会占据页面的位置
- 括号里面引号可写可不写
- 可以有多背景,用逗号隔开,先引入的显示在上面
背景图片平铺background-repeat:;
- repeat 平铺
- no-repeat 不平铺
- repeat-x 水平平铺
- repeat-y 垂直平铺
背景图片定位 background-positon:x y;
- 数值:
- backgroun-position:20px -50px;
- x越往左越大,x越往下越大
- 可取负数
- 关键词:垂直参数top center botton;水平参数 left center right
- backgrou-position:center center;==>background-position:center;
背景图片大小background-size:长 宽;
- 数值:可写一个值,也可以写两个值,也可以百分比
- 关键词:
- cover 将图片按比例放大填充满页面,多余的部分裁剪掉
- contain 将图片原本大小按比例放入页面
背景图片固定:background-attachment:;
- fixed 相当于浏览器窗口固定(默认效果)
- scroll 跟随页面滚动
背景图片的复合写法: background:yellow url()no-repeat center top/cover fixed;
- 颜色 路径 平铺 位置/尺寸 定位
- 参数可以根据实际情况省略(写尺寸,必须搭配位置一起使用)
列表
表单 list-style-type:;
- disc
- circle
- square
- none
列表图片 list-style-image:url();
- 列表左边的小图标
列表图片位置 list-style-position:;
- outside 外面
- inside 里面
列表复合 list-style:;
- list-style:inside url()disc;
- 常用:list-style:none;
表格
border-spacing:0;取消单元格与单元格的距离
border-collapse:; 合并边框线
- separate(默认)分开的
- collapse 合并线条
empty-cells:;隐藏空单元格(border-collapse会让它失效)
- hide
table-layout:;表格大小算法
-
fixed 固定 (固定宽度,不会随内容多少改变单元格宽度)
优点:固定,加快运行的速度,允许浏览器更快的对表格进行布局。
缺点:不够灵活),内容足够多的时候,会产生折行 -
auto 自动的(列的宽度是由列单元格中没有折行的最宽的内容设定的。)
(优点:比较灵活,文本多的时候,可以直接撑开
缺点:较慢(因为它需要在确定最终的布局前访问表格中的所有内容)。
浮动float
-
float:;
- left
- right
- none
-
清除浮动clear:;
- clear:left;
- clear:right;
- clear:both;
浮动的特征:
1.原本纵向排列的元素会横着排列,兄弟关系的时候,前面的元素浮动,后面元素会进行补位
2.兄弟关系中,如果所有的元素都添加浮动,元素都会脱离文档流,然后挨着横向显示
3.如果行放不下:会折行显示
浮动带来的影响:
元素浮动.-=>脱离文档流,不占据页面空间,不参与高度计算---》如果父元素没有高度,则父元素的高度会产生塌陷效果。
如何解决高度塌陷问题?
1.添加一个空的元素(块级元素,比如div) ,给这个元素添加clear : both;就可以清除浮动带来的影响
2.给父元素固定的高度
3.添加伪类,给伪类设置清除浮动的样式
div:after{
content:"' ;
display:block;转化元素类型
clear:both;清除浮动
}
4.给父元素设置overflow:hidden;触发bfc(块级格式化上下文)
边框 border
复合写法border:1px solid red;
三个必须一起使用才有效果
- border-width
- border-color
- border-style
- solid 实线
- dashed 虚线
- double 双线
- dotted 点状线
- 练习:三角形和风车
间距
外间距margin:;
m0-20快速生成margin:0 20px;
-
负值,auto(使用前提:盒子要有宽度,不能有浮动和定位)(auto运用于页面版心)
-
单一外间距:margin-left:; margin-right:; margin-top:; margin-bottom:;
-
简写:
- margin:10px ; 上下左右外间距为10px
- margin;10px 20px; 上下10 左右20
- margin:10px 20px 30px ; 上10 左右20 下30
- margin: 10px 20px 30px 40px;上10 右20 下30 左40
-
bug:
-
一、margin-top的传递问题:
父子关系中,一个父元素,当给子元素添加margin-top时,子元素的margin-top会传递给父元素。
解决办法:
1.给最近的父元素添加溢出隐藏overflow:hidden;触发bfc
2.给父元素添加border:1px solid transparent;( transparent透明的实线)3.将子元素margin换成父元素padding
-
二、margin外间距重叠问题:
兄弟关系中,两个上下相邻的盒子,给上面盒子添加margin-bottom,下面添加margin-top,这两个盒子垂直方向外间距会取最大值(水平方向会相加两个值)
解决办法:给下面盒子创建一个父元素并声明overflow:hidden;
内间距padding:;
-
padding会把盒子撑大
-
没有负值和auto
-
单一写法和简写和margin一样
盒子模型 组成content+padding+border+margin
标准盒子模型box-sizing:content-box;
-
标准盒子模型的width(自己设置的width:10px;)===content
-
盒子大小=content(10px)+padding+border
-
实际占据空间:content+padding+border+margin
怪异盒子模型box-sizing:boder-box;
-
怪异盒子模型(自己设置的width:10px;)===content+padding+border
-
盒子大小: 设置的值(10px)
-
占据空间:设置的值+margin
盒子溢出overflow:;
- overflow:;
- visible 可见的(默认)
- hidden 隐藏
- auto 自动判断,超出时出现滚动条
- overflow-x:scroll;超出后水平方出现向滚动条
- overflow-y:scrol;
- 隐藏滚动条
::-webkit-scrollbar {
display: none;}
单行文本溢出显示小圆点:(overflow:hidden; white-space:nowrap;text-overflow:ellipsis;+宽度)
p{
width:200px;
height: 200px;
line-height: 16px;
background-color:brown;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
}
white-space:;剩余空间
- normal 折行(默认)
- nowrap不折行
- pre 不折行保留空格(回车会有折行效果)
- pre-wrap 折行保留空格
- pre-line 折行清除空格
text-overflow:ellipsis;小圆点(搭配overflow:hidden;)
多行文本溢出显示小圆点:
p{
width:200px;
line-height: 16px;
background-color:brown;
overflow: hidden;/*溢出隐藏*/
text-overflow: ellipsis;/*溢出小圆点*/
display: -webkit-box;/*将对象设置为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical;/*从上到下排列元素 还有个值horizontal水平的*/
-webkit-line-clamp: 2;/*不属于css规范属性,必须结合上面两行代码才有效果,表示显示的行数*/
}
width(不写高度)
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
元素类型
行内(内联)元素
span,a, b ,strong,em,del,u
-
多个行内元素横向排列,设置宽高不生效
-
display:inline;
块元素
p,div,h1-h6,hr,ul,ol,li,dl,dt,dd,form,fieldset,legend
- 纵向排列,独占一行,可以设置宽高
- display:block;
行内块元素(内联块)
img,input,textarea select
- 横着排列,可以设置宽高
- display:inline-block;
- img的display的值是inline,但表现特征是行内块元素
其他分类:置换元素(替换元素)与非置换元素
- 置换元素(相对于行内块元素)
含义:一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。
``特征:在不使用css修饰时,元素的标签和属性也会影响元素的显示
``可以近似理解成:内联块元素就是置换元素
img/input/textarea/canvas/select/iframe/object
- 非置换元素:除了置换元素以外的元素就是非置换元素
display:;
- inline 行类
- block 块
- inline-block 行内块
- list-item 列表
- none 隐藏
- table 表格
- table-cell表格单元格/row表格的行/row-group表格的行分组
行内块元素的对齐方式:
- vertical-align:;
- baseline 基线对齐(默认)
- middle 中线对齐
- bottom 底线对齐
- 两个行内块文本为兄弟时,如果第一个行类块文本是多行,第二个行内块会按照第一个行类块最后一行文本排列
图片的居中对齐:
vertical-align:middle;给图片父元素 line-height:height;text-align:center;
图片和块元素之间存在3-6px的间距:
原因:1.行内块元素的对齐方式是基线对齐。2.本质而言是元素类型不同
解决:1.vertical-align的值不为baseline。2.将图片的display的值为block;
元素类型分为:块元素、行内元素 其中img标签属于行内元素但也属于置换元素, 置换元素本身一般拥有固有尺寸(宽度,高度,宽高比),这些元素往往没有实际的内容,即是一个空元素,置换元素就是浏览器根据元素的属性和属性值,来决定元素的具体显示内容,大部分的置换元素的元素类型为inline-block;被称之为置换元素,所以置换元素可以直接设置大小。
定位 position:;
配合方位属性使用,值为0,也将方位属性写上
相对定位relative
参照物:原来的位置(原位置仍然保留)
固定定位fixed
参照物:浏览器窗口(脱离文档流)
静态定位static (默认值)
参照物:正常文档流
使用方位属性不生效
粘性定位sticky
参照物:初始情况下在正常文档流中,达到一定条件(top值)则参照浏览器窗口(原位置保留)
特征:当页面向上滚动时,当前元素始终停留在页面窗口内
绝对定位:absolute
参照物:相对于最近一级有定位(除static定位)的祖先元素,如果所有祖先元素都没有定位的话就相对于浏览器窗口。(脱离文档流)
注意:如果使用了margin:auto;再使用absolute,auto会失效。
绝对定位脱离文档流是全脱离,可以触发bfc(解决margin-top的传递问题)
定位(fixed和absolute)和浮动的区别:
-
浮动:半脱离文档流(文字环绕效果)可以触发bfc(解决margin-top的传递问题)
定位:全脱离文档流(文字遮挡效果)可以触发bfc(解决margin-top的传递问题)
-
浮动:让纵向排列的元素横向排列
定位:通过某种方式让元素进行位置移动
-
fixed/absolute/float都会让margin:auto;失效
-
都会让行内元素变成块元素(效果:宽高生效)
父相子绝(父绝子绝/父固定定位子绝)
为什么要父亲相对定位,儿子绝对定位:因为父亲用绝对和固定定位会导致margin:auto失效
定位后的层叠顺序:
- z-index 层叠顺序 z-index属性不带单位,默认值为auto 理解为0,可以给负值。(定位以后才能使用)
- 没设置z-index时,最后写的对象会显示在最上面,
- 设置后,设置后数值越大越靠上
利用定位让元素居中
1.使用absolute/fixed(用relative的话left:50%参照物会有问题),top和left:50%;再margin-top:元素高度的一半;和margin-left:元素宽度的一半;
2.div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}
3.calc 计算函数 支持+-
注意点:符号周围必须添加空格
.box {
width: 400px;
height: 300px;
background-color: red;
text-align: center;
line-height: 300px;
position: absolute;
/* calc 计算函数 支持+-
注意点:符号周围必须添加空格 */
top: calc(50% - 150px);
left: calc(50% - 200px);
}
宽高自适应
宽高自适应:
-
宽度自适应:
-
不给盒子设置宽度就是宽度自适应,默认情况下会找父元素或浏览器窗口的100%
-
宽度取值 auto和100%的区别:
-
元素没有添加盒子模型:效果一样
-
元素添加了盒子模型:
-
设置100%的情况
- 实际宽度:100%+盒子模型 =100%+padding+border
-
设置auto的情况
- 实际宽度:父元素或浏览器窗口的100%
-
-
-
-
高度自适应:
不给盒子设置高度就是高度自适应,由内容(文字,padding,border,图片)撑开。(默认值为auto)
- 设置固定高度缺点:
-
1.如果内容再次增加,会产生溢出,需要重新设置高度
-
2.如果内容很少,会有大量留白,页面不美观
-
解决办法:使用高度自适应
-
min-height:;最小高度
-
max-height:;最大高度
-
min-width:;最小宽度
-
max-height:;最大宽度
- 设置固定高度缺点:
窗口自适应:
效果:窗口放大缩小不会有滚动条
html,body{height:100%;}
布局
左右布局:
-
左固定右边自适应
- 左边宽高固定,右边宽100%,高固定;左边左浮动,右边margin-left:左边盒子的宽;
-
使用 calc()函数 +-*/都可计算
作用:动态计算高度或者宽度的剩余
- 左边宽高固定,右边宽calc( 100% - 左边的宽度),左右都浮动
- 注意:运算符左右需要用空格隔开
上下布局:
- 上面固定,下面自适应
左中右布局:
- 左右固定,中间自适应
- 左右设置宽高且分别左右浮动。中间设置高度,不设置宽度,margin:左右盒子的宽度;
- 注意:需要把中间盒子要放在最后面
- 左右设置宽高且分别左右浮动。中间设置高度,不设置宽度,margin:左右盒子的宽度;
- 全部左浮动,左右设置固定宽度,中间用calc(100% - 左右的宽度)
BFC 块级格式化上下文(block formatting contexts)
概念:
特征:
- 盒子内部不影响外部元素影响,也不影响外部
- 触发bfc,里面的浮动元素也会参加高度计算
- 触发bfc的方法:(解决高度塌陷和子元素的margin-top作用于父元素问题)
- html本身就是一个bfc
- overflow的取值不为visible;可以取值hidden/scroll/auto
- float的值不为none;可以取值left/right
- 能够脱离文档流的定位absolute/fixed
- display取值不为none;可取:inline-block;flex;inline-flex;inline-flex;table-cell,table-caption,
万能清除法:给父元素
父元素::after{
content:;
display:block;
clear:both;
width:0;
height:0;
transform:scale(0);
opacity:0;
visibility:hidden;
width:0;
height:0;
}
为什么不推荐overflow:hidden;解决高度塌陷问题
- 因为overflow:hidden;会使元素溢出后隐藏看不见,容易导致盒子里面的元素被隐藏。
隐藏元素的区别:
- display:none;不占位隐藏
- opacity:0;占位隐藏
- visibility:hidden;占位隐藏
- transform:scale(0); 占位隐藏 scale缩放
重置样式
@charset "utf-8";
html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}
body{
font-size:16px;
font-family: '微软雅黑';
}
ul,ol,li{
list-style:none;
}
h1,h2,h3,h4,h5,h6{
font-size:16px;
font-weight: normal;
}
b,strong{
font-weight: normal;
}
i,em{
font-style: normal;
}
a,u{
text-decoration: none;
}
img{
border:0;
display:block;
}
input,fieldset{
outline: none;
border:0;
}
.clear_fix:after{
content:'.';
clear:both;
height:0;
overflow:hidden;
display:block;
visibility: hidden;
}
.clear_fix{
zoom:1;
}
标签:CSS2,border,元素,学习,background,overflow,随笔,margin,选择器
From: https://www.cnblogs.com/SenorCoconut/p/16838766.html