css基础(未完待续)

来源：互联网发布：网络平台合作协议编辑：程序博客网时间：2024/06/04 19:22

background
border
padding
magin
font
a
其他标签
a标签伪类
默认样式重置
块元素和内嵌元素
img 标签
浮动原理
clear
将整个页面分成三部分
清浮动
css相对定位

background

background: blue url(img) no-repeat 10px 50px fixed;repeat 重复    repeat-x    repeat-y    no-repeat10px(x轴) 50px(y轴)center 0 水平居中 center top0 center 垂直居中fixed背景固定，不会随着页面的滚动移动

border

border: 10px solid red;solid dashed dotted只加上边框border-top: 1px, solid, red;

padding

内边距
内边距相当于给一个盒子加了填充厚度，会影响盒子的大小

padding: top right bottom left;padding: 30px 40px; top = bottom = 30px left = right = 40pxpadding: 30px 40px 20px;  top = 30px left = right = 40px bottom = 20px

magin

外边距
外边距问题：
上下边距会叠压
父子级包含的时候子级的margin-top会传递给父级
可以通过使用父级的内边距来达到移动子级块的目的

margin-right: auto;
margin-left: auto;
配合使用会使得块元素居中，改变浏览器窗口大小也不会影响居中

font

font-size
font-family
color
line-height #文字在行高的上下居中，与盒子相等则在盒子中居中
text-align #文本对齐方式
text-indent # 首行缩进，1em缩进一个字
font-weight # 文字着重
font-style # 文字倾斜
text-decoration # 文字修饰
letter-spacing # 字母间距
word-spacing # 单词间距(以空格为解析单位)

a

target=”_blank”
target=”_self”

在title标签下定义，定义所有a标签的跳转方式

a标签的作用
链接
下载
在href中添加文件路径，达到下载的目的
锚点

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><a href="#box1">aaa</a><a href="#box2">bbb</a><a href="#box3">ccc</a><a href="#box4">ddd</a><div style="height: 1000px;" id="box1">    aaa    <br/>    ----------------------------------</div><div style="height: 1000px;" id="box2">    bbb    <br/>    ----------------------------------</div><div style="height: 1000px;" id="box3">    ccc    <br/>    ----------------------------------</div><div style="height: 1000px;" id="box4">    ddd    <br/>    ----------------------------------</div></body></html>

其他标签

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><p>段落</p><strong>粗体</strong><em>斜体</em><span style="color: red;">区分样式</span>在同一行的其他内容<ol>    <li>列表</li>    <li>列表</li>    <li>列表</li>    <li>列表</li></ol><ul>    <li>列表</li>    <li>列表</li>    <li>列表</li>    <li>列表</li></ul><dl>    <dt>列表标题</dt>    <dd>列表项</dd>    <dd>列表项</dd>    <dd>列表项</dd></dl></body></html>

群组选择符“，”

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style>    #box1,#box2{        width:100px;        height:100px;        background: red;    }</style><body><div id="box1">aaa</div><div id="box2">bbb</div></body></html>

子类选择符“ ”

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style>    div h1{        width:100px;        height:100px;        background: red;    }</style><body><div>    <h1>hello</h1></div></body></html>

样式优先级
类型 < class < id < style行间样式 < js

A. #header#div1 .box1 div .section p .link{}
B. #some .base #font #call a{}

从高优先级开始计算，数量越多优先级越高，上述例子中可以看出B中有更多的id选择符，所有B的优先级更高

a标签伪类

a:link 未访问
a:hover 鼠标悬停
a:active 链接激活
a:visited 访问过后

默认样式重置

body, p , p1, h2, h3, h4, h5, h6, dl, dd{margin:0; }ol,  ul{list-style: none; padding: 0; margin: 0;}a{text-decoration: none}img{border: none;}

块元素和内嵌元素

块的特征：
默认独占一行
没有宽度时，默认撑满一排
支持所有css命令

内嵌（内联，行内）的特征：
同排可以继续跟同类的标签
内容撑开宽度
不支持宽高
不支持上下的margin 和 padding
html文件中代码换行被解析为一个空格

span{display:block}
display: block; 显示为块
display: inline; 显示为内嵌

img 标签

既不是内嵌也不是块，是inline-block

inline-block特性
1. 块在一行显示
2. 行内属性标签支持宽高
3. 没有宽高的时候内容撑开宽度

存在的问题：
代码内的换行是会别解析为一个空格的
ie6 ie7 不支持inline-block

雅虎面试题

<P>&nbsp;&nbsp;哥写的不是HTML，是寂寞。<br><br>&nbsp;&nbsp;我说： <br>不要迷恋哥，哥只是一个传说<p>哥写的不是<abbr title="Hypertext Markup Language">HTML</abbr>></p><p><cite>我</cite>说：<br/><q>不要迷恋哥，哥只是个传说</q></p><pre

前端规范
1. 所有书写均在半角状态下小写
2. id, class 必须以字母开头
3. 所有标签必须闭合
4. html标签用tab键缩进
5. 属性值必须带引号
6. 
7. /*css 注释*/
8. ul, li/ol, li/dl, dt, dd拥有父子级关系的标签
9. p, dt, h标签里面不能嵌套块属性标签
10. a标签不能嵌套a
11. 内联元素不能嵌套块

内联元素和块元素参考文档

浮动原理

display: inline-block
1. 使得块元素可以同行显示
2. 使得内嵌支持宽高
3. 换行被解析了
4. 不设置宽高时宽度由内容撑开
5. IE6 7不支持块元素

float: left：
1. 使块元素在同一行显示
2. 是内嵌支持宽高
3. 不设置宽度的时候宽度由内容撑开
4. 支持IE6, 7
5. 脱离文档流

脱离文档流的表现形式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .box1{            width:100px;            height:100px;            background: red;            float: left;        }        .box2{            width:200px;            height:200px;            background: blue;        }    </style></head><body><div class="box1">box1</div><div class="box2">box2</div></body></html><pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'DejaVu Sans Mono';font-size:11.3pt;"><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>  .box1{            width:100px;  height:100px;  background: red;  float: left;  }        .box2{            width:200px;  height:200px;  background: blue;  }    </style></head><body><div class="box1">box1</div><div class="box2">box2</div></body></html></pre>

执行结果如下所示：
这里写图片描述

元素加了浮动之后，会脱离文档流，按照指定的一个方向移动，知道碰到父级的边界或者另一个浮动元素停止

clear

left right both none
元素的某个方向上不能有浮动元素
在.box2中添加clear: both后
这里写图片描述

将整个页面分成三部分

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        body{            margin:0;        }        .box{            width:900px;            margin:0 auto;        }        .left{            width: 300px;            float: left;        }        .left div{            height: 298px;            background: #99aecd;            border: solid 1px #ffffff;        }        .center{            width: 300px;            float: left;        }        .center div{            height: 198px;            background: #2459a2;            border: solid 1px #ffffff;        }        .right{            width: 300px;            float: left;        }        .right div{            height: 298px;            background: #204982;            border: solid 1px #ffffff;        }    </style></head><body><div class="box">    <div class="left">        <div></div>        <div></div>    </div>    <div class="center">        <div></div>        <div></div>        <div></div>    </div>    <div class="right">        <div></div>        <div></div>    </div></div></div></body></html>

效果如下所示：
这里写图片描述

清浮动

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .box {            width: 300px;            margin: 0 auto;            border: 10px solid #000;        }        .d{            width:200px;            height:200px;            background: red;            float: left;        }        .clear{zoom: 1} /*处理IE6 7*/        .clear:after{  /*处理其他处理器*/            content: '';            display: block;            clear: both;        }    </style></head><body><div class="box clear">    <div class="d"></div></div></body></html>

IE6， 7元素浮动要并在同一行的元素都要加浮动

IE6双边距bug：
在IE6下，块元素有浮动和横向的margin，横向的margin值会被放大成两倍

解决办法：
display-inline

IE6 7下li下几个px的间隙问题：
在IE6 7下li本身没有浮动，但是内容浮动了，li下就多出几个px
解决办法：
1. 给li加浮动
2. 给li加vertical-align: top;

vertical-align的另一个作用：清除img下的几个px的间隙

在IE6下高度小于19px的元素，高度会被当作19px来处理
解决办法：overflow: hidden;

css相对定位

position: relative
不影响元素本身特性
不使元素脱离文档流

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style>    div{font-size: 20px;}    .box1{width:100px; height:100px; background: red;}    .box2{width:100px; height:100px; background: blue;}    .box3{width:100px; height:100px; background: green;}</style><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body></html>

这里写图片描述
变为这样

阅读全文

0 0