css基础(未完待续)

最新推荐文章于 2024-08-16 14:48:56 发布

原创最新推荐文章于 2024-08-16 14:48:56 发布 · 563 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

1 篇文章

订阅专栏

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-repeat
10px(x轴) 50px(y轴)
center 0 水平居中 center top
0 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 = 40px
padding: 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>