css基础知识整理
/css基础/
HBuilder快捷键,
li3 按tab快速生成
div>ul>li5 按tab快速生成
div+div 按tab生成连个div
ul>li{我要自卸王$}*5 按tap键
ee 颜色
重要:重置html默认样式很重要,有些好的reset.css,直接引入即可
css中以-moz,-ms,-webkit,-o开头的样式的含义
-moz代表baifirefox浏览器私有属性；
-ms代表IE浏览器私有属性；
-webkit代表chrome、safari私有属性；
-o代表Opera私有属性。
html标签是可以继承css属性的
1.选择器(选择符) 别的选择器都可以用基本选择器组合成
1.元素(基本)选择器:标签选择器,通用选择器 ,类选择器,id选择器, 优先级:id选择器>类选择器>标签选择器
标签选择器
标签名{}
id选择器
#id名{}
类选择器
.类名{}
通配符选择器
{} /选择所有元素 一般用来清除内外边距，便于统一管理和设置/
eg:
{
margin: 0px;
padding: 0px;
}
2.关系选择器:包含选择器(E F),子选择器(E>F),相邻选择器(E+F),兄弟选择器(E~F)
包含(后代选择器,嵌套选择器)选择器(E F):选择所有被E元素包含的F元素(就是选择E里面的所有F元素)
eg:ul li{background-color: red;}
子选择器(E>F):选择元素E下的子元素F 只能选择子元素,不能选择到孙子元素
eg:ul > li{background-color: red;}
相邻选择器(E+F):选择紧贴在E元素之后F元素，元素E与F必须同属一个父级。
相邻选择器和兄弟选择器的区别:相邻选择器只能选择一个紧紧相邻的同级别的元素,而兄弟选择器可以选择多个同级别的选择器
eg:li+li{background-color: red;}
兄弟选择器(E~F):选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。
eg:li~li{background-color: red;}
3.属性选择器:
规定:att是css的属性,val是属性值
种类:
E[att]:选择具有att属性的E元素。
E[att='val']:选择具有att属性且属性值只等于val的E元素,注意这样的不能选中 class="a b"，这能选中class="a"这样的
E[att~='val']:选择具有att属性且属性值为一用空格分隔的字词列表 eg:能选中这样的class="a b"
E[att^='val']:选择具有att属性且属性值为以val开头的字符串的E元素。
eg:
div[class^='a']{background-color: red;}选中字符串a开头的div
E[att\(='val']:选择具有att属性且属性值为以val结尾的字符串的E元素 eg:<style> div[class\)="c"] { /选择以c结尾的div标签/
border: 2px solid #000;
}
E[att='val']:选择具有att属性且属性值为包含val的字符串的E元素。
eg:
E[att|='val']:如果元素E拥有att属性，并且值为val，或者值是以val-开头的，那么E将会被选择。
eg:
4.常用选择器:并集(分组选择器)选择器,交集选择器
并集选择器:E,F{} 同时选择E和F元素 E和F可以是基本选择器,用','隔开,除了通配符选择器
eg:ul,p{background-color: red;}
交集选择器:EF{} 选择满足E和F条件的元素 E,F不可以用id选择器 E和F之间没有任何符号和空格
eg:.txt.ext{color: red;} /选择class="txt ext"的标签/
5.伪类选择器:CSS伪类是用来添加一些选择器的特殊效果。
伪类:元素不同状态表现不同样式 选择器使用":" 如:链接元素访问前和访问后是不同的样式
伪对象(伪元素):文档结构中没有的元素 选择器使用"::"
1.用于超链接的四个伪类选择器: E一般是a标签 E:link,E:visited,E:hover,E:active
超链接状态顺序 必须按顺序写：a:link {} a:visited {} a:hover {} a:active {}
注意:link和visited只能用于a标签
E🔗设置超链接a在未被访问前的样式 初始状态
E:visited:设置超链接a在其链接地址已被访问过时的样式 访问完了的状态
E:hover:设置元素在其鼠标悬停时的样式 鼠标悬停状态 应用很广
E:active:设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式 点击状态
eg:
a:link{color: yellow;} /初始文字颜色/
a:visited{color: red;} /访问完了的文字颜色/
a:hover{color:black;} /鼠标悬停链接上文字的颜色/
a:active{color: blue;} /点击和释放之间文字的颜色/
一般link和visited设置相同样式,hover和acitve设置一样的样式
2.焦点伪类选择器 E:focus:设置对象在成为输入焦点时的样式。前提是E必须能获得焦点
eg:input:focus{color: red;}
3.否定伪类选择器 E:not(s):匹配不含有s选择符的元素E。
eg: 给该列表中除最后一项外的所有列表项加一条底边线
li:not(:last-child) { border-bottom: 1px solid #ddd; }
4.根选择器 E:root 匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
eg:html:root{color: red;} /给html设置默认颜色red/
5.孩子选择器
E:first-child,E:last-child,E:only-child,E:nth-child(n),E:nth-last-child(n)
E:first-of-type,E:last-of-type,E:only-of-type,E:nth-of-type(n),E:nth-last-of-type(n)
E:first-child:匹配E的父元素的第一个子元素E。注意E必须是E的父元素的所有子元素中的第一个孩子,要想使用这个选择器
E:last-child:匹配E的父元素的最后一个子元素E。注意E必须是E的父元素的所有子元素中的最后一个孩子,要想使用这个选择器
应用:1.一般用于修改列表的第一个或者最后一个列表项的样式 2.有多个重复的相同的标签时,设置首位不同样式时使用
注意:E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素
eg: p:first-child{color:#f00;}
我是一个p
eg: p:first-child{color:#f00;}
我是一个标题
我是一个p
注意(-of-type都通用):要使下面这几个属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
E:first-of-type:该选择符总是能命中父元素的第1个为E的子元素，不论父元素的第1个子元素是否为E
1.注意和E:first-child的区别
eg:
我是一个p元素
我是一个p元素
E:last-of-type:该选择符总是能命中父元素的倒数第1个为E的子元素，不论倒数第1个子元素是否为E
eg:
我是一个p元素
我是一个p元素
E:nth-of-type(n):该选择符总是能命中父元素的第n个为E的子元素,不论第n个子元素是否为E
E:nth-last-of-type(n):该选择符总是能命中父元素的倒数第n个为E的子元素,不论倒数第n个子元素是否为E
6.其他一些重要的选择器
1.E:checked:匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
eg:
2.E:enabled:匹配用户界面上处于可用状态的元素E 匹配enabled的输入框
E:disabled:匹配用户界面上处于禁用状态的元素E 匹配disabled的输入框
应用:针对表单的输入框之类的,因为输入框具有disabled属性和enabled属性
3.E:target,@page:firsr,@page:left,@page:right 略
6.伪对象选择器 很重要常用 伪元素不会改变网页结构,因为伪元素不构成网页结构
1.E:first-letter/E::first-letter:选择每个E元素的第一个字母或文字 经常用于杂志第一个字下沉
注意:大括号和E:first-letter之间有空格 p:first-letter {}
应用:此伪对象常用于块级元素(行级元素要转成块级元素才能使用),经常用来配合font-size和float属性制作首字下沉效果
eg:<style>
h1{font-size:16px;}
p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}
p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
</style>
<h1>杂志常用的首字下沉效果</h1>
<p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>
2.E:first-line/E::first-line:选择每个E元素的第一行
注意:1.此对象用于块级元素,行级元素必须使用display:block后才能使用该伪对象
2.大括号和E:first-letter之间有空格 E:first-line {}
3.E:before/E::before:在每个E元素内容之前插入内容 不影响网页结构
4.E:after/E::after:在每个E元素内容之后插入内容 after必须和content属性一起使用 重点
注意：before和after必须和content属性一起使用,content属性里面写要添加的内容 可以为伪元素设置css样式
before和after使用content添加地内容是行级元素
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
ul{
width: 200px;
margin: 0 auto;
}
ul li{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}
ul li::after{
content: "";
display: block;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>我要自学网1</li>
<li>我要自学网2</li>
<li>我要自学网3</li>
<li>我要自学网4</li>
<li>我要自学网5</li>
</ul>
</body>
</html>
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1:after {content:url(http://img.php.cn/upload/article/000/000/015/5c6a721a166be932.gif);}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>
5.E::placeholder:设置对象文字占位符的样式
eg:input::placeholder{color:green;}
<input type="text">
6.E::selection:设置对象被选择时的样式(文字被选择就是右键鼠标移动)
注意:::selection只能定义被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性)
eg:p::selection{color:red;}
<p>dsfaadf</p>
2.三种使用方式 文件引入 ,head头处引入,行内引入
3.文本样式 文本不等同于文字,还包括行级元素和行内块级元素 ,字体样式,行样式 text font line (关键字)
颜色: color:颜色值;
文本居中,左对齐,右对齐 text-align:center left,right;
垂直居中:line-heigh:与文本元素高度值一致;
文本属性(text-)和字体属性(font-)
1.文本对齐: text-align vertical-align
text-align属性规定元素中的文本的水平对齐方式
属性值：none,center,left,right,justify(两端对齐,文字会出现在两端)
vertical-align属性规定元素中的文本垂直对齐方式 对行内元素,行内块级元素,表格元素有效(常用)
属性值:baseline 默认值对齐父元素的基线 sub对齐下标
super:对齐上标 top:文本和文字顶部对齐 bottom:底部对齐 middle:居中对齐
2.文本颜色: color(设置文本颜色)
合法颜色值:颜色名 16进制颜色值 RGB颜色值 RGBA颜色值, opacity(设置颜色的不透明度 0是完全透明 1是不透明 取值范围0.0-1.0之间)
3.文本修饰: text-decoration === text-decoration-line, text-decoration-color(指定文本装饰的颜色), text-decoration-style(指定文本装饰的样式),
text-decoration(是老版本的文本修饰,text-decoration-line是新版本的):主要用来删除链接的下划线 等价于 text-decoration-line 指定文本装饰的种类
text-decoration:none 删除链接的下划线
属性值:none(默认),underline(下划线),line-through(横穿文字的线)，inherit(继承父元素的text-decoration属性的值)
或者直接写 text-decoration:#f00 solid underline; 用这个建议,因为简单
text-decoration-color:定义文本修饰线的颜色
text-decoration-style:定义文本修饰线的样式
属性:solid：实线
double：双线
dotted：点状线条
dashed：虚线
wavy：波浪线
3.文本阴影text-shadow:设置元素中文字的阴影效果
可以设定多组效果，每组参数值以逗号分隔。多组阴影特殊效果 Demo: 火焰文字 霓虹文字
属性:none：无阴影
text-shadow:值1 值2 值3 值4;
值1:水平阴影位置 必须写的属性值 正值时,阴影在右,负值时,阴影在左
值2:垂直阴影位置 必须写的属性值 正值时,阴影在下,负值时,阴影在上
值3:阴影模糊距离 可选参数
值4:阴影颜色 可选 默认和文字颜色一样
eg:给文字添加模糊效果
p{
text-shadow: 0px 0px 2px red;
}
eg: text-shadow:1px 1px 0.1px red;
4.行高:如果行高的高度等于盒子的高度，可以使本行文本垂直居中，仅适用单行文本
应用:使行级元素垂直居中
line-height：就是行高的意思，指的是一行的高度 默认是normal
line-height:100px 一般把heigth和line-heigth设置成一样,表示垂直居中
取值:normal,尺寸单位,数字(按照font-size的倍数设置行高),百分比(按照当前字体尺寸的百分比设置行高)
行高 line-height:用于设置文本垂直居中
1.针对单行文本垂直居中
针对单行文本垂直居中公式：行高的高度等于盒子content区域的高度(即height),可以使当行文本垂直居中，
line-height = height
注意只适用单行文本。
2.针对多行文本垂直居中
行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
第一步，一个宽度300300的盒子，看盒子中一共显示了几行文字，
假如是5行，再看一下行高，如果行高是line-
height:30px; 那么就知道行高5=150px
第二步，让(盒子的高度-150px)/2=75;
那么设置盒子的padding-top:75px;
同时保证盒子的高度为300px,那么高度改为225px;
5.文本转换: text-transform
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
属性值:
uppercase(将每个单词转换成大写),lowercase(将每个单词转换成小写),capitalize(将每个单词的第一个字母转换成大写)
none：无转换,
6.字间距: letter-spacing 了解即可 直到letter是字的意思即可
可以设置负值,%,px,em
属性值:normal
7.首行缩进: text-indent属性规定文本首行缩进的距离, 单位使用em(当前文字的尺寸)
text-indent:只能用于文本首行缩进距离,默认值是0
eg:p{
text-indent: 2em;//首行缩进两个汉字尺寸
text-indent: 1em;//首行缩进一个汉字尺寸
}
字体属性:
1.字体大小(字号): font-size 单位可以用:px,em,rem,%
font-size表示设置字体的大小,如果设置成inherit表示继承父元素的字体大小值
属性值是字体大小
eg: font-size:100px
2.字体粗细: font-weight
font-weight表示设置字体的粗细
属性值:none(默认值，标准粗细)|bold(粗体)|border(更粗)|lighter(更细)|100-900(设置具体粗细，400等同于normal,700等同于bold)|inherit(继承父元素的字体粗细值)
eg:font-weight:100; 注意没有单位
3.字体系列: font-family 计算机的 C://windows/Fonts 里面右本计算机的所有下载的字体
font-family:"Microsoft Yahei","微软雅黑","Arial",sans-serif,"宋体"
如果浏览器不支持第一个字体会尝试下一个字体，直到找到能支持的字体为止
4.字体样式(风格): font-style
font-style: 字体;
属性值:
italic:斜体
oblique:表示中间状态的倾斜 没有italic倾斜
normal:正常字体样式 经常用来重置字体
重置字体样式:
1.给i标签和b标签,清除字体样式 这样多了两个无样式标签
i,b{font-weight: normal;font-style: normal;}
5.书写模式:
dirction: 检索或设置文本流的方向
属性值:
ltr(left to rigth)：文本流从左到右。
rtl(right to left)：文本流从右到左。
eg: dirction:rtl;unicode-bidi:bidi-override; 注意从右到左必须加 unicode-bidi:bidi-override;否则默认无效
unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示。与 <' direction '> 属性一起使用
属性值:默认值是 normal
normal：对象不打开附加的嵌入层，对于内联元素，隐式重排序跨对象边界进行工作。
embed：对象打开附加的嵌入层，<' direction '> 属性的值指定嵌入层，在对象内部进行隐式重排序。
bidi-override：严格按照 <' direction '> 属性的值重排序。忽略隐式双向运算规则
writing-mode:设置或检索对象的内容块固有的书写方向
适用于：除 <' display '> 属性定义为table-row-group | table-column-group | table-row | table-column之外的所有元素
属性值: 注意:此属性效果不能被累加使用。例如，父对象的此属性值设为 tb-rl ，子对象再设置该属性将不起作用，仍应用父对象的设置。
horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb）
vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）
vertical-lr：垂直方向自左而右的书写方式。即 top-bottom-left-right
lr-tb：左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的（IE）
tb-rl：上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的（IE）
eg:导航栏实例 float表示浮动
</body>
</html>
4.border-radius 同时设置四个园角的边框半径
形式1:border-radius:左上半径 右上半径 右下半径 左下半径 (符合上右下左)
形式2:border-radius:半径 设置四个圆角半径一样
border-radius: 10px; /*设置边框的四个边角 圆的半径*/
4.边框阴影:可以是图片或者背景更有立体感 box-shadow 文本阴影:text-shadow
box-shadow:值1 值2 值3 值4 值5;
值1:水平阴影位置,必须有的参数 正值时,阴影在右边,负值时,阴影在左边
值2:垂直阴影位置,必须有的参数 正值时,阴影在下边,负值时,阴影在上边
值3:阴影模糊距离 可选值
值4:阴影尺寸, 可选值
值5:阴影颜色,合法颜色值,可选 默认黑色
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
img{
width: 200px;
height: 200px;
border-radius: 4px; //设置圆角边框
box-shadow: 1px 1px 1px 1px #ccc; //设置边框阴影
}
</style>
</head>
<body>
<img src="img/b.gif"/>
</body>
</html>
outline:轮廓属性(也叫外边框),是绘制于元素周围的一条线,位于边框(border)边缘的外围,可起到突出元素的作用
应用:可以用来取消input和textarea等输入框的outline样式,因为太丑了 原来点击input边框外面会变黑
outline:在一个声明中设置所有的外边框属性
outline:none; 取消outline样式
eg:input{outline: none;}
注意:属性和border用法一样,但是不同的是outline没有outline-left这类单独表示方向的属性
outline-color
outline-style
outline-width
margin:外边距(表示本边框到其他盒子的最近距离),5个属性
属性:
margin:在一个声明中设置所有外边距属性
margin-bottom:设置元素的下外边距
margin-left:设置元素的左外边距
margin-right:设置元素的右外边距
margin-top:设置元素的上外边距
属性值:margin可以使用负值，重叠的内容。
auto 设置浏览器边距。这样做的结果会依赖于浏览器
length 定义一个固定的margin（使用像素，pt，em等）
% 定义一个使用百分比的边距
margin: 20px auto; 使盒子居中,并且和上右下左的边界距离为20px
注意：前面写几个值,表达的含义不一样,https://www.php.cn/manual/view/33005.html
margin:像素值 auto; 像素值是距离上下左右边界的 设置元素居中对齐
条件:此元素必须为块级元素,而且必须有宽高;
margin:20px,auto; 和上边界距离为20px,元素居中对齐
6_1.css的尺寸
属性:
height:设置元素的宽度
line-height:设置行高
max-height:设置元素的最大高度
max-width:设置元素的最大宽度
min-height:设置元素的最小高度
min-width:设置元素的最小宽度
width:设置元素的宽度
6.元素定位: 详见博客 position:指定元素的定位类型 使用left,rigth,top,bottom确定位置 eg:元素距离左边距离left
如果display设置为none,那末float及position属性定义将不生效；
position的属性值:
1.静态定位(static):所有元素的默认定位方式 元素不可以改变位置 要想元素可以改变位置定位不许设置成absolute,relative,fixed
注意:1.HTML元素的默认值,即没有定位,元素出现在正常的文档流中。
2.静态定位的元素不会受到top, bottom, left, right影响 其他定位都收他们四个属性影响
2.绝对定位(absolute):可重叠,通过z-index控制, position: absolute;
注意:
1.绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于定位
2.absolute定位使元素的位置与文档流无关,因此不占据空间。
3.absolute定位的元素和其他元素重叠。
eg:绝对定位可以设置重叠的样式
3.相对定位(relative):相对定位元素不可层叠。依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
相对定位元素经常被用来作为绝对定位元素的容器块。
注意：绝对定位和相对定位的区别,绝对定位是相对于父亲或者祖先的,而相对定位是相对于原本自身应该在在的位置的定位
eg:
4.固定定位(fixed):固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。
5.粘性定位(sticky):很有用 position:sticky;基于用户的滚动位置来定位
粘性定位的元素是依赖于用户的滚动,在postion:relative和position:fixed定位之间切换
eg:
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>
6.重叠的元素 z-index搭配 position:absolute;一起使用,因为只有绝对定位支持元素重叠
z-index属性指定了一个元素的堆叠顺序(哪个元素放在前面,哪个元素放在后面)
属性值:number(可正可负),auto,inherit
元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意: 如果两个定位元素重叠,没有指定 z-index,最后定位在HTML代码中的元素将被显示在最前面。
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>
eg:<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>z-index_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.z1,
.z2,
.z3 {
position: absolute;
width: 200px;
height: 100px;
padding: 5px 10px;
color: #fff;
text-align: right;
}
.z1 {
z-index: 1;
background: #000;
}
.z2 {
z-index: 2;
top: 30px;
left: 30px;
background: #C00;
}
.z3 {
z-index: 3;
top: 60px;
left: 60px;
background: #999;
}
</style>
</head>
<body>
<div class="z1">z-index:1</div>
<div class="z2">z-index:2</div>
<div class="z3">z-index:3</div>
</body>
</html>
7.界面布局
dispaly: 太强大了
作用:1.块级元素和行级元素转换
块级变行级:display:inline;
行级变块级:display:block
2.隐藏对象但是不占据物理空间 display:none;
3.设置元素变成表格之类的
p{display: inline;}
span{display: block;}
css中所有的浮动属性
float:设置浮动,clear:清除浮动
元素的水平方向浮,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
几种重要应用:
1.如果图像是右浮动,下面的文本流将环绕在它左边
eg:
在下面的段落中，我们添加了一个 float:right 的图片。导致图片将会浮动在段落的右边。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
2.彼此相邻的浮动元素 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
eg:
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
</body>
</html>
3.创建一个没有表格的网页,使用float创建一个网页页眉、页脚、左边的内容和主要内容。
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #2196F3;
color: white;
text-align: center;
padding: 15px;
}
.footer {
background-color: #444;
color: white;
padding: 15px;
}
.topmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #777;
}
.topmenu li {
float: left;
}
.topmenu li a {
display: inline-block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.topmenu li a:hover {
background-color: #222;
}
.topmenu li a.active {
color: white;
background-color: #4CAF50;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.sidemenu {
width: 25%;
}
.content {
width: 75%;
}
.sidemenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidemenu li a {
margin-bottom: 4px;
display: block;
padding: 8px;
background-color: #eee;
text-decoration: none;
color: #666;
}
.sidemenu li a:hover {
background-color: #555;
color: white;
}
.sidemenu li a.active {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>
<ul class="topmenu">
<li><a href="#home" class="active">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系我们</a></li>
<li><a href="#about">关于我们</a></li>
</ul>
<div class="clearfix">
<div class="column sidemenu">
<ul>
<li><a href="#flight">The Flight</a></li>
<li><a href="#city" class="active">The City</a></li>
<li><a href="#island">The Island</a></li>
<li><a href="#food">The Food</a></li>
<li><a href="#people">The People</a></li>
<li><a href="#history">The History</a></li>
<li><a href="#oceans">The Oceans</a></li>
</ul>
</div>
<div class="column content">
<div class="header">
<h1>The City</h1>
</div>
<h1>Chania</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>You will learn more about responsive web pages in a later chapter.</p>
</div>
</div>
<div class="footer">
<p>底部文本</p>
</div>
</body>
</html>
float: 用于浮动布局(元素挨着),指定一个盒子(元素)是否可以浮动
注意:
1.css的float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
float(浮动),往往是用于图像,但它在布局时一样非常有用
属性值:
left:设置元素水平从左向右浮动
right:设置元素水平从右向左浮动
inherit
none
clear:指定不允许元素周围有浮动元素 元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
属性值:
left:左边不许有浮动
right:右边不许有浮动
both:两边不许有浮动
none:无
inherit
eg:clear属性指定元素两侧不能出现浮动元素,使用clear属性往文本中添加图片廊
clear:both;设置两边没有浮动
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
</body>
</html>
visibility:设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间
属性值:
visible：设置对象可见 默认值
hidden：设置对象隐藏 占用空间
collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。
overflow:检索或设置对象处理溢出内容的方式
属性值:
visible：对溢出内容不做处理，内容可能会超出容器。
hidden：隐藏溢出容器的内容且不出现滚动条。
scroll：隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
overflow === overflow-x + overflow-y
eg:
<body>
....
</body>
</html>;
10.css响应式设计 重点
1.viewport:是用户网页的可视区域,中文叫视区
application-->手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中
设置viewport,一个常用的针对移动网页优化过的viewport meta标签如下:
eg:
width:控制viewport的大小,可以指定一个值,如果600,或者特殊的值devic-width设备宽度
height:控制viewport的高度
initial-scale:初始化比例,也即是页面第一次load的时候缩放比例
maximum-scale:允许用户缩放到的最大比例
minimum-scale:允许用户缩放到的最小比例
user-scalable:用户是否可以手动缩放
2.网格视图:很多网页都是基于网格设计的,说明网页是按照列来布局的
响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。
11.css框架 bootstrap,layui,vue
12.css基础知识
1.常用尺寸单位
像素:px 屏幕上的一个点做单位(计算机图形学讲过)
em:用元素本身的字体的font-size属性值做参考 是font-size倍数的关系
1em = font-size 1 px
eg:p{width:20em;} 那么width=20p的font-size px
dafsa
rem:依据html元素的font-size做参考 用法:可以通过修改html的font-size大小影响所有rem单位的元素大小 用于响应式开发
1rem = html的font-size*1 px
2.颜色表示和16进制颜色值
html和css规范中定义了147中可用的颜色值
1.rgb(红,绿,蓝) r:0-255 g:0-255 b:0-255
2.rgba(红,绿,蓝,透明度(0.0-1.0))
3.16进制表示颜色方式 #rrggbb r:红色(00-ff 十六进制表示) g:绿色(00-ff) b:蓝色(00-ff)
eg:红色 #ff0000 绿色 #00ff00 蓝色 #0000ff
