您的位置：首页 > Web前端 > CSS

css初学精华笔记

2016-08-11 18:18 399 查看

css元素分类

块级元素

常见的有
<div><p><h><ul><li>
,也可以通过
display:block
;来设置为块级元素

块级元素的特点：

1、 每个块级元素都是从新的一行开始，并且气候的元素也是另起一行

2、 元素的高度、宽度、行高以及顶和底边的边距都是可以设置的

3、 元素宽度在不设置的情况下，默认市父级元素的100%

内联元素

常见的有
<span><a><label><strong>
就是典型的内敛元素也就是行内元素。当然块级元素也可以通过设置
display:inline;
讲元素设置为内联元素。

内敛元素的特点：

1、 和其他元素都在一行

2、元素的高度和宽度以及顶部边距都是不可设置的

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内敛块状元素

内敛块状元素就是同时具备内敛元素和块状元素的特点，
display:inline-block
就是讲元素设置为内敛块状元素,
<img><input>
就是内敛亏装标签

内敛块状元素特点：

1、 和其他元素都在一行

2、 元素的高度、宽度和行高以及顶部编剧都可以设置。

css布局模型

流动模型

流动市默认的网页布局模式，也就是网页在默认状态下HTML网页元素都是更具流动模型来就行网页内容布局的，即顺着文档流解析，

浮动模型

解决块级元素无法并排现实的问题

层模型

就行photoshop中的图层一样可以对每个图层进行精确定位操作

绝对定位(position:absolute)

即讲元素从文档流拖出来，然后使用left，right，top，bottom属性相对于最接近的一个具有定位属性的父包含块(即父级元素拥有相对定位对其绝对定位进行约束)进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于游览器进行定位。

相对定位(position:relative)

如果想对元素设置层模型中的相对定位，需要设置position:relative,它通过left，right，top，bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程市首先按static（float）方式生成一个元素，然后相对以前的位置移动。

固定定位(position:fixed)

固定定位，与absolute定位类型相似，但它的相对移动坐标市视图（屏幕内的网页窗口）本身。由于视图本身市固定的，它不会随游览器窗口的滚动条变化而变化，或改变游览器窗口的显示大小，因此固定定位的元素始终位于游览器窗口内视图的某个位置，不会受文档流影响。

ul dl ol

dl用来定义一个列表，dt用来定义列表的一部分头部，dd用来定义列表中一部分的具体描述

ul无须列表

ol有序列表

css负边框

设置margin（left/top）为负值可以微调元素的位置

但是如果使用right和buttom则会使其附着的元素向本元素靠拢并覆盖

使用浮动时如果使用margin负值则会留空

经典布局圣杯布局

圣杯布局市三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以先渲染。也就是在html文档中中间的部分要写在左右布局之前。

当然这样的布局是面向PC端的，移动端由于屏幕宽度较小，不推荐多列布局。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style media="screen">
.wrapper{
padding:0px 150px 0px 150px;
}
.main{
width: 100%;
background: red;
height: 30px;
float: left;

}
.left{
width: 150px;
background: blue;
height: 30px;
float: left;
margin-left: -100%;
position: relative;
left: -150px;
}
.right{
height: 30px;
width: 150px;
background: gray;
float: left;
margin-left: -150px;
position: relative;
right: -150px;

}
</style>
<title></title>
</head>
<body>
<div class="wrapper">
<div class="main">
main
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>

</body>
</html>


经典布局双飞燕布局

双飞燕布局是在圣杯布局的前提下进行改进的：不再使用position和padding，而是在main中增加一个div设置margin来进行布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style media="screen">
.wrapper{
width: 100%;
}
.main{
width: 100%;
background: red;
height: 30px;
float: left;

}
.main .content{
margin-left: 150px;
margin-right: 150px;
}
.left{
width: 150px;
background: blue;
height: 30px;
float: left;
margin-left: -100%;
}
.right{
height: 30px;
width: 150px;
background: gray;
float: left;
margin-left: -150px;
}
</style>
<title></title>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="content">
main
</div>
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>

</body>
</html>


最新flex布局

BFC（block formatting context）

块级格式化作用范围：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局。一个环境中元素不会影响到其他环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素受浮动元素的影响，两个浮动元素之间是互补影响的。这里有点类似BFC就是一个独立的行政单位的意思，也可以说BFC是一个作用范围，可以把它结识成一个独立的容器，并且这个容器的里box布局，与这个容器外的毫不相干。

如何产生BFC：当一个HTML元素满足下面的条件中的任何一点，都可以产生BFC：

1. float的值不为none

2. overflow的值不为visible

3. display的值市table-cell，table-caption，inline-block中的任何一个

4. position的值部位relative和static

BFC能做什么

不和浮动元素重叠

如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏布局就是这么做的。

看下面一个例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.aside{background:#f00;width:170px;float:left;height:300px;}
.main{background:#090;height:100%;overflow: hidden;}
</style>
</head>
<body>
<div class="aside">
</div>
<div class="main">
</div>
</body>
</html>


我们通过设置BFC来达到去除覆盖。

2. 清楚元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了(IE Haslayout)。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
html,body {height:100%; }
* { padding:10px; margin:0; color:#000; text-decoration:none; list-style:none; font-family:"微软雅黑" }
.outer{width:300px;border:1px solid #666;padding:10px;overflow: hidden;}
.innerLeft{height:100px;width:100px;float:left;background:#f00;}
.innerRight{height:100px;width:100px;float:right;background:#090;}
</style>
</head>

<body>
<div class="outer">
<div class="innerLeft"></div>
<div class="innerRight"></div>
</div>
</div>
</body>
</html>


解决上下相邻元素重叠

看下面例子：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
html,body {height:100%; }
* { padding:0; margin:0; color:#fff; text-decoration:none; list-style:none; font-family:"微软雅黑" }
.rowone{background:#f00;height:100px;margin-bottom:20px;overflow:hidden;}
.rowtow{background:#090;height:100px;margin-top:20px;position:relative}
</style>
</head>

<body>
<div class="rowone">
</div>
<div class="rowtow">
</div>
</body>
</html>


根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。也就是处于同一个BFC中的两个垂直窗口的margin会重叠。

根据 CSS 2.1 8.3.1 Collapsing margins 第三条，生成 block formatting context 的元素不会和在流中的子元素发生空白边折叠。所以解决这种问题的办法是要为两个容器添加具有BFC的包裹容器。

所以解这个问题的办法就是,把两个容器分别放在两个据有BFC的包裹容器中，IE里就是触发layout的两个包裹容器中！

解决方法：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
html, body { height:100%; }
* { padding:0; margin:0; color:#fff; text-decoration:none; list-style:none; font-family:"微软雅黑" }
.mg {overflow:hidden; }
.rowone { background:#f00; height:100px; margin-bottom:20px; }
.rowtow { background:#090; height:100px; margin-top:20px; }
</style>
</head>

<body>
<div class="mg">
<div class="rowone">
</div>
</div>
<div class="mg">
<div class="rowtow">
</div>
</div>
</body>
</html>


hasLayout表现出来的特性跟BFC很相似，所以可以认为是IE中的BFC。上面的规则几乎都遵循，所以上面的问题在IE里都可以通过触发hasLayout来解决。

编码规范https://github.com/ecomfe/spec

CSS选择器

子选择器

ul >Li

类选择器

li

后代选择器

ul li

ID选择器

通用选择器

*

伪类选择器

a:hover

分组选择器

li,span{}

标签选择器

a{}

属性选择器

a[href$=pdf]

a[title*=title]

a[title^=pdf]

nth-of-type(n)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css
相关文章推荐
新的分享
章节导航