前端开发基础知识

发表于 |
字数统计 1,508 | 阅读时长 7

CSS盒子模型

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

元素实际占用尺寸 = width(height) + padding + border + margin

选择器

CSS1 定义的选择器

  1. 元素选择器：E
  2. ID选择器：#id
  3. 类选择器：E.class
  4. 包含选择器：E F
  5. 伪类选择器：E:link、E:visited、E:active、E:hover、E:focus
  6. 伪元素：E:first-link、E:first-letter

CSS2.1 增加的选择器

  1. 通配选择器：* (星号)
  2. 伪类选择器：E:lang(fr)
  3. 子包含选择器：E > F
  4. 相邻兄弟选择器：E + F
  5. 伪元素：E:before、E:after
  6. 属性选择器：E[foo]、E[foo=”bar”]、E[foo~=”bar”]、E[foo|=”bar”]

优先级

※同级后来居上

例如：

HTML代码：

<ul class="list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

CSS代码：

ul li{color:#000;}
1 + 1 =2
.list li{color:#f00;}
10 + 1 =11

.list li 的优先级更高，所以浏览器会显示 .list li 设置的样式

其实说白了，就是后面的会把前面的覆盖掉，内敛的会把link的覆盖掉，然后再整合。

布局

浮动 (float)

  1. none：不浮动（默认值）
  2. left：左浮动
  3. right：右浮动

解释：

浮动什么意思呢，比如，默认的，我们知道，div是占满一行的，现在我们想把两个div显示在一行上，那怎么办呢
<div style="width:100px;">11111</div><div style="width:150px">2222</div>
这样我们就设置了两个div，一个宽度100px,一个宽150px,可预览一下，我们的div仍在两行上，那么怎么把它改到一行上呢，这儿就需要float，设置第一个div的float为left
<div style="width:100px;float:left;">11111</div><div style="width:150px">2222</div>
再预览，就可以看到，它们到一行上了。
clear是什么意思呢，clear是清除的意思，它有三个值，left,right,both
很好理解，如果设置了clear:left，它就不怕它的左边有float，同理clear:right,clear:both，是左右都不让有float
举个例子，还是上面的
我们设置第二个div的clear:left,也就是不让它左边有float
<div style="width:100px;float:left;">11111</div><div style="width:150px;clear:left;">2222</div>
我们预览一下，就可以看到，尽管第一个div已经float:left了，这两个div仍然在两行上，就是由于第二个div不让它左边有float
因为css的定义是后面的可以覆盖前面的，明白了吧

清浮动-clear-both

HTML代码：

<div class="layout">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clear"></div>
</div>

CSS代码：

.layout{}
.left{float:left}
.right{float:right}
.clear{clear:both}

清浮动-overflow:hidden

HTML代码：

<div class="layout">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

CSS代码：

.layout{overflow:hidden;zoom:1;}
.left{float:left}
.right{float:right}

定位 (position)

  1. static-没有定位（默认值）
  2. relative-相对定位
  3. absolute-绝对定位
  4. fixed-固定定位

层级

  1. 层级 (z-index) - 后来居上
  2. 层级 (z-index) - 定位元素高于非定位元素
  3. 层级 (z-index) - 同为定位元素则比较 z-index

隐藏与显示

  1. 隐藏元素：display:none;visibility:hidden;
  2. 显示元素：display:block;visibility:visible;

※ “display” 在 块级元素&行内元素 中再详细介绍

CSS Reset

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,table,th,td,fieldset,
form,input,button,textarea,hr,blockquote,pre{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:bold;line-height:1em;}
ul,ol,dl{list-style-type:none;}
fieldset,img{border:none;}
table{border-collapse:collapse;table-layout:fixed;empty-cells:show;}
address,caption,cite,code,dfn,th{font-style:normal;font-weight:normal;}
ins{text-decoration:underline;}
del{text-decoration:line-through;}
q:before,q:after{content:"";}

注意事项：

不要使用 *{margin:0;padding:0;}

最2B的 Reset： div{float:left;}

CSS 优化

属性简写-外边距

margin:10px 15px 20px 25px;
        下     上 右    左 顺时针方向

margin:10px;
        上下左右统一设置

margin:10px 15px;
        上下 左右

属性简写-内边距

padding:10px 15px 20px 25px;
        下     上  右     左 简写方式与 margin 相同

属性简写-背景

background:#ff0000 url(bg.jpg) no-repeat fixed   top center;
            颜色     图像       平铺方式   滚动方式 图像开始位置

可以省略部分值

background:#f00;

background:url(bg.jpg) no-repeat;

属性简写-边框

border:1px solid #ff0000;
       宽度 样式  颜色

可以省略部分值

border:solid #f00;

border:1px solid;

属性简写-字体

font:italic bold 15px/20px "微软雅黑"
       斜体  粗体   字号/行高 字体名称

字号与字体名称是必须的，其他值可省略

font:15px “微软雅黑”;

注意事项：

简写中省略不写的属性，将使用默认值，而不是继承。

属性继承

文本相关的样式会继承

列表相关的样式会继承

颜色属性会继承

选择器优化

从右到左的解析顺序

body ul li a {color:#f00;}
4     3   2  1

选择器的效率

※在一些 JavaScript 库中的选择器，也适用于该效率。（例如：jQuery）

属性继承，减少选择器

.box { padding:10px; }
.box p { color:#333; }

简化为：

.box { padding:10px ; color:#333; }

书写顺序

显示属性            自身属性            文本属性
display         top                color
visibility        left            font
overflow        width            line-height
position        height            text-align
float            margin            text-decoration
clear            padding            text-indent
                border            text-transform
                outline            vertical-align
                background        white-space
                                content

标签&语义

块元素&行内元素

块元素 (block)

div p h1~h6 ul ol li dl dt dd table form …

行内元素 (inline)

span a img em strong select input textarea …

行内元素无法设置一些CSS属性，例如：

width, height, margin-top, margin-bottom,
padding-top padding-bottom, text-index …

※可以使用 display 来改变

display 常用属性

完整属性查阅：http://www.w3school.com.cn/css/pr_class_display.asp

  1. inline 设置为行内元素
  2. block 设置为块元素
  3. inline-block 设置为行内块元素*
  4. none 元素不会被显示

嵌套规则

块元素内能包含所有行内元素

行内元素不能包含块元素

以下块元素中不能包含块元素

h1~h6, p, dt, address

HTML5 简单应用

DocType
<!DOCTYPE HTML>
字符集
<meta charset="utf-8">
外链 css 文件
<link rel="stylesheet" href=“filename.css">
外链 javascript 文件
<script src=“filename.js"></script>
大爷，赏个铜板呗！