社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
css， cascading style sheets 层叠样式表。
它用来控制网页样式，并允许将样式代码与网页内容分离的一种标记性语言。简单地说：css的引入是为了使得HTML语言能够更好地适应页面的美工设计。
<p style="color:red;">文本颜色</p>
<style type="text/css">
/* css样式：选择符（如span）和声明（属性名和属性值）：{}内容构成 */
span{
font-size: 100px;
color: green;
font-weight: bold;
}
</style>
在<head>中加上<link rel="stylesheet" type="text/css" href="css/test.css">
再建一个test.css文件：
h2{
color: blue;
font-size: 100px;
font-weight: bold;
}
●三种方法优先级：内联式>嵌入式>外部式 （嵌入式大于外部式是因为浏览器解析代码是从上往下解析的，比较的是执行先后问题，前提link在style的后面）
选择器样式：
♦语法: 选择符{属性:值;}
♦作用:选中页面上的元素(标签),设置对应的样式一基础选择器
一、基础选择器
<h2>标签选择器</h2>
h2
{
color: blue;
font-size: 100px;
font-weight: bold;
}
<h3 class="active title">木子洋</h3>
/*类选择器*/
.active{
color:green;
}
.title{
font-size: 35px;
}
<h3 id="container">木子洋</h3>
/*id选择器*/
#container{
color:red;
}
二、高级选择器
后代选择器(爸爸的儿子,孙子…)
子代选择器(亲儿子)
组合选择器
例如：h3,span{
color:brown;
font-size:25px;
}
html中：
<div>
<h2 class="active">你看看</h2>
</div>
css中：
h2{
color: red;
}
.active{
font-weight: lighter;
}
h2.active{
font-size: 55px;
}
/*爱恨准则 先爱再恨LoVe HAte*/
/*没有被访问过a的状态*/
a：link{
color:red;
}
/*被访问过a的状态*/
a:visited{
color:purple;
}
/*鼠标悬浮时的状态*/
a:hover{
color:pink;
}
/*鼠标按住时a的状态*/
a:active{
color:blue;
}
注意：hover可以应用于任何的元素
●内联样式的权重为1000
●id选择器的权重为100
●类选择器的权重为10
●元素选择器的权重为1
●权重计算永不进位
注意：继承来的属性 它的权重非常低接近于0
字体 font- family:
“微软雅黑” , “宋体” ,…;
可放置多个字体，后面的都是备选。
字体大小 font-size:
20px; 像素单位:px,em,rem
px:绝对单位。一旦设置 了值,不管网页如何变化始终如一
em:相对单位。当前某块区域的字体大小20px,比如给p标签设置了20px,那么1em= 20px;
rem :相对单位主要应用于移动端
字体颜色 color: red
颜色表示法:
单词表示法red green yellow purple.
rgb( )表示法
rgba() a:alpha 表示透明度
十六进制表示法
#ff6700
字体样式 font-style
normal :默认的字体
italic:斜体
字体粗细 font- weight:
bold:粗的字体
100~900 400表示默认
文本修饰 text-decoration
underline下划线
none无线（默认）
overline.上划线
line-through删除线
文本缩进 text- indent
单位建议使用em
行高 行与行之间的距离 line- height
px,em,rem
line-height：行间距，行高一定要大于你的字体大小
letter-spacing：字间距，只对中文起作用
word-spacing：字间距，对英文单词起作用
文本对齐方式 text-align
left（默认）
right
center使用最多
字面意思就是显示，主要是控制元素显示的方式，比如说是否显示、显示的元素的状态、特征是什么等等
display:bloock;
<div> <ul> <ol> <p> <h> <table> <form>等等
块级元素特点
◆独占一行
◆>可以设置宽高，如果不设置宽度，默认是父标签的100%宽度
display:inline
<a> <span> <em> <strong> <lable>等等
行内元素特点
◆在一-行内显示
◆不能设置宽高，默认的宽高为文本内容占据的宽高
display:inline-block;
<input> <i m g>等等
行内块元素特点
◆在一行内显示
◆可以设置宽高
什么是盒模型？盒模型（css model）这一术语用来设计和布局时使用。所有的HTML元素可以看作盒子。它的属性包括外边距、边框、内边距和实际内容。
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
/*上下左右*/
/*padding-top: 40px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;*/
padding: 20px 40px;/*20表示上下方向，40表示左右方向*/
padding: 10px 20px 30px;/*上 左右 下*/
padding: 10px 20px 30px 40px;/*表示上 右 下 左方向的padding值*/
可能的值：
| 值 | 描述 |
|---|---|
| auto | 浏览器计算内边距。 |
| length | 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的内边距。 |
| inherit | 规定应该从父元素继承内边距。 |
border 简写属性在一个声明设置所有的边框属性。三要素：粗细 样式 颜色
可以按顺序设置如下属性：
border-width
border-style
border-color
如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。
样式：solid dotted double dashed。
可能的值：
| 值 | 描述 |
|---|---|
| border-width | 规定边框的宽度。 |
| lborder-style | 规定边框的样式。 |
| border-color | 规定边框的颜色。 |
| inherit | 规定应该从父元素继承 border 属性的设置。 |
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
可能的值：
| 值 | 描述 |
|---|---|
| auto | 浏览器计算外边距。 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的外边距。 |
| inherit | 规定应该从父元素继承外边距。 |
外边距塌陷问题：margin垂直方向上会出现外边距合并（小的值合到大的值里面去意思是大的值会覆盖小的）。为了避免这个问题所以对于两个相邻盒子，只设置一个盒子的垂直方向上的外边距。
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
◆浮动的背景
◆浮动属性
◆浮动的现象:
1.文字环绕
2.脱离了标准文档流
3.浮动元素互相贴靠
4.浮动元素有收缩现象
可能的值：
| 值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | right |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
注意：最好不要单独设置一个盒子浮动，要浮动就一起浮动。要不浮动就不去浮动。 设置浮动的盒子会脱离整个文档，就像浮起来一样。
文档流，标准文档流指的是元素在排版布局中是默认，从左往右从上往下一个流式的排列布局。而浮动就是脱标现象。
浮动具有破坏性，导致父元素高度塌陷，也就是浮动撑不起父盒子高度。而我们常常认为浮动造成父元素高度塌陷是一种bug，这里要告诉大家：这不是bug，而是标准。
解决方法：清除浮动
1.给父盒子设置固定高度 缺点：使用不灵活 后期不易维护 应用：网页中盒子固定高度区域，比如固定的导航栏
2.内墙法 规则：在最后一个浮动元素的后面加一个空的块级元素，并且设置该属性clear: both; 缺点：结构冗余
3.伪元素（选择器）清除，想在哪清除就在哪加上clearfix
::after
.clearfix::after{
content: '';
display: block;
}
.top_bar{
height: 200px;
border: 2px solid pink;
overflow: hidden;
}
一、 BFC是什么东东
了解BFC前先一了 解一下Box和Formatting Context
( 1） B: BOX即盒子,页面的基本构成元素。分为inline、
( 2 ) FC: Formatting Context是W3C的规范中的一 种概念。它是页面中的一 块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
常见的Formatting Context有Block fomatting context (简称BFC )和Inline formatting context (简称IFC)
BFC定义
BFC( Block formatting context)
直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block- level Box如何布局,并且与这个区域外部毫不相干。
BFC布局规则:
1.内部的Box会在垂直方向,一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
3.每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float元素重叠。
5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时,浮动元素也参与计算。
二、哪些元素会生成BFC
1.根元素
2.float属性不为none
3.posi tion为absolute或fixed
4.display为inline-block
5.overflow不为visible -->
position：static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
理解：一般的元素的定位都是静态定位。
不能设置left，top等等（设置了浮动以后也可以设置宽高）
position:relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。若仅仅给一个标准文档流下的盒子设置相对定位，那么它与标准文档流下的盒子没有任何区别。但是能设置left，top等，设置了left、top等的值之后以原来的位置为参考点进行移动。
position:absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
tips：cursor:游标，鼠标cursor: pointer;时，鼠标悬浮到这时就会变成小手。
position:fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
特点：1.脱离标准文档流，有压盖现象
2.一旦设置固定定位，在页面中滚动网页，固定不变。
参考点：以浏览器的左上角为参考点。
应用：小广告，回到顶部，回到导航栏等等。
使用z-index（数字越大表示层级越高），可以调整。只能应用在定位的元素之上。其在嵌套结构中，看的都是父级的层级。
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
| 值 | 描述 |
|---|---|
| auto | 默认。堆叠顺序与父元素相等。 |
| number | 设置元素的堆叠顺序。 |
| inherit | 规定应该从父元素继承 z-index 属性的值。 |
background-image: url(images/yang.jpg);
background-repeat: no-repeat;
background-position: 50px 100px;
background-position-x: 100px;
background-position-y: 200px;
background-position: top center;
background-position: 20% 50%;
background-position: 176px 582px;
利用border属性的圆角设置：border-radius
border-radius: 5px（左上和右下角） 30px（右上和左下角）;
border-radius:1px（左上） 5px（右上和左下） 30px（右下）;
border-top-left-radius: 15px;也可以单独设置一个角的。
border-top-left-radius: 15px 30px;表示水平方向圆角半径是15，垂直方向圆角半径是30，二者不一致就不像一个圆角了。
width: 200px;
height: 200px;
background-color: pink;
border-radius:2px 5px 30px;
border-radius: 5%;
以上代码实现效果：
实现圆：border-radius：50%;此时变成了一个圆。
实现圆环：在后面加个 border:5px solid gold;
实现半圆：
width: 200px; height: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
box-shadow
box-shadow有五个值
第一个表示阴影的水平偏移方向。
第二个表示阴影的垂直偏移方向（第一二个都可正可负 第一个值为正则阴影往右边偏移 为负则反之。第二个值为正则阴影往下偏移 为负则反之）
第三个表示阴影的模糊程度，数值越大表示模糊程度越深。
第四个是颜色。
第五个默认是outset，表示阴影在外，而inset表示内阴影。
.shadow{
position: relative;
width: 200px;
height: 200px;
background-color: seagreen;
box-shadow: 20px 10px 30px pink;
}
以上代码实现效果：
常见单列布局有header与footer等宽,content略窄的单列布局
.header{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color:black;
}
.container{
width: 1200px;
margin:0 auto;
}
.header .container{
height: 60px;
background-color: pink;
}
.wrap{
width: 100%;
height: 100%;
}
.wrap .container{
height: 100%;
/*background-color: seagreen;*/
}
.wrap .left{
width: 10%;
height: 100%;
float: left;
background-color: yellowgreen;
}
.wrap .right{
width: 90%;
height: 100%;
float: right;
background-color: olive;
}
.footer{
width: 100%;
height: 100px;
}
.footer .container{
height: 100px;
background-color: gold;
}
以上代码实现效果：
在上面代码的基础上加上
html,body{
margin:0;
height:85%;
}
.wrap .center{
height: 100%;
background-color: #72D8C0;
margin:0 130px;
}
改为.wrap .right{
width:10%;
height: 100%;
float: right;
background-color: olive;
}
以上代码实现效果：
1.css规范命名大全http://www.divcss5.com/jiqiao/j4.shtml
2.项目的目录规范
3.确定错误发生的位置
通过删除标签块的方式来确定错误发生的位置。
.box{
width: 200px;
height: 200px;
background-color: #FCDBE0;
color: #DEAB9B;
text-align: center;
/*line-height: 200px;*/
display: table-cell;
vertical-align: middle;
}
td{
width: 100px;
height: 100px;
background-color: seagreen;
text-align: center;
/*vertical-align: top;*/
}
vertical-align: middle;垂直方向-排列方式
以上代码实现效果：
.box{
width: 200px;
height: 200px;
background-color: #F3ED76;
/*position: relative;*/
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child{
width: 100px;
height: 100px;
background-color: #FDB0BC;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
td
{
width: 100px;
height: 100px;
background-color:#7FEBB1;
vertical-align: middle;
text-align: center;
}
span{
display: inline-block;
width: 50px;
height:50px;
background-color: pink;
line-height: 50px;
}
.wrap{
width: 200px;
height: 200px;
background-color: #D5BAF7;
position: relative;
}
.xiongda{
width: 100px;
height: 100px;
background-color: #D5F8C8;
position: absolute;top:50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
