css

时间 2019-11-12

标签 css 栏目 CSS 繁體版

原文原文链接

css笔记
1.CSS全称为"层叠样式表(Cascading Style Sheets)"
2.CSS样式的语法: 选择符{属性:值}
3.CSS样式代码插入的三种形式:内联/嵌入/外部
内联式:就是把代码写在html标签的行间样式(不建议用这种)
嵌入式:就是把样式写在<style>css样式</style>里的
外部式:就是把css代码写在一个单独的外部文件中,用<link href="css地址" rel="stylesheet" type="text/css">
4.CSS选择器:
标签选择器,如 p{}
类选择器,如 .class{}
ID选择器,如 #id{}
子选择器,如 .class>li{} //仅仅li的代码有样式
后代选择器 .class li{} //所有li下的代码都有样式
通用选择器 *{}
伪类选择器 a:hover{color:red;} //css3新增容许给html不存在的标签设置样式
分组选择器 h1,span{}
5.元素分类
块级元素:div,p,h1...h6,ol,ul,table,address,blockquote,form //{display:block}
行内元素:a,span,b,strong,i,em,label //{display:inline}
6.css布局模型:
基本文档流
浮动布局
绝对布局 position:absolute绝对 relative相对 fixed固定
绝对定位:相对于父级
相对定位:相对于之前的定位
固定定位:相对于窗口
7.居中
水平居中
text-align:center //对父元素进行设置
margin:0 auto //对子元素进行设置
8.清除浮动有哪些方式？比较好的方式是哪种？
（1）父级div定义height。
（2）结尾处加空div标签clear:both。
（3）父级div定义伪类:after和zoom。
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto。
（6）父级div也浮动，须要定义宽度。
（7）父级div定义display:table。
（8）结尾处加br标签clear:both。
比较好的是第3种方式，好多网站都这么用。css

清除浮动：html

方法1：给父div添加overflow：hidden；

这种方式就是让浏览器检查父div有没有height，若是没有由子div的高度给它撑开。overflow的底层原理还有待研究。css3

缺点：不能和position一块儿用，当给一个元素定位的时候，超出父div的部分会被隐藏。浏览器

方法3：在父div中定义一个clearFix伪类，设置::after属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1{
            width:400px;
            background:pink;
        }
        .div2{
            width:100px;
            height:100px;
            background:orange;
            float:left;
        }
        .clearFix::after{
            content: "";
            height: 0;
            visibility: hidden;
            clear:both;
            display: block;     /*before和after默认状况下添加的是行内类型的元素，而这里须要添加块级元素。*/
            zoom:1;            /*解决ie6的兼容性，ie6浏览器不认识伪元素*/
        }
    </style>
</head>
<body>
    <div class="div1 clearFix">  
        <div class="div2"></div>
    </div>
</body>
</html>

其实这种方式和方法2原理同样都是在父div里面添加一个空div。可是这种方法比较灵活，能够将clearFix的css属性代码放在css初始化的文件里，哪里须要清除浮动就在父级上添加一个clearFix的伪类便可。目前好多大型网站都在使用这种方式（网易、腾讯、新浪等等）。布局

1. CSS——CSS样式
2. 【CSS】理解CSS
3. CSS Tools: Reset CSS
4. CSS——CSS基础
5. CSS之CSS hack
6. CSS：关于CSS Hack
7. CSS animation & CSS animation 101
8. CSS+DIV-CSS与Javascript
9. css样式 --- CSS hack
10. CSS 框架 Blueprint CSS
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• 适用于PHP初学者的学习线路和建议