CSS(中)篇

1.1行高

行高属于文字的属性

行高=文字大小+上间距+下间距（默认行高=18px）

行高的作用：

设置文字垂直方向中有距离

文字垂直居中（行高=容器的高度）

影响行高的因素：

文字大小可以改变行高

文字字体也可以改变行高

1.2行高单位（了解）

px,em,百分比，不带单位

如果给单独一个标签设置行高

px：行高值就是设置的行高，与文字大小无关

em: 行高值=设置的行高*文字大小

百分比：行高值=设置的行高*文字大小

不带单位：行高值=设置的行高*文字大小

如果给父元素设置行高（line-height），子元素行高的特点

父px：子元素的行高=父元素的行高值

父em: 子元素的行高=父元素行高值*父元素文字大小（先计算后继承）

父百分比：子元素的行高=父元素行高值*父元素文字大小（先计算后继承）

父不带单位：子元素的行高=父元素的行高*子元素的大小（先继承后计算）

1.3盒子模型（重点）

作用：实现网页布局（在网页画盒子）

组成：

边框： border

内边距： padding （盒子中的内容与盒子的边框的距离）

外边距： margin （盒子与和盒子间的距离）

例子:解决两张图片的默认间距方法:

1.(不推荐)连写

<body>

      <img src="img/shunfeng.jpg"><img src="img/up.jpg">

</body>

2.设置浮动

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

<style type="text/css">

    img{

        height: 150px;

        width: 150px;

        float: left;

    }

</style>

</head>

<body>

      <img src="img/shunfeng.jpg">

      <img src="img/up.jpg">

</body>

</html>

1.4边框（border）

border-style: none; 默认没有边框

solid 实线

dotted 点线

dashed 虚线

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box{

            width: 300px;

            height: 300px;

            /*设置边框颜色*/

            border-color: red;

            /*设置边框的宽度*/

            border-width: 1px;

             /*    设置边框的样式*/

            border-style: solid;

        }

    </style>

</head>

<body>

        <div class="box"></div>

</body>

</html>

border属性联写中：

a.必须设置border-style

b.没有顺序限制

去掉边框

border: 0 none;

去掉轮廓线

outline-style:none

1.5laber控件的使用

1.6内边距

内边距（padding）：内容与边框之间的距离

注意：padding 只能移动盒子的内容

padding属性联写： padding: 10px；内边距的上下左右都移动

padding: 10px 20px; 上下10px，左右20px

padding: 10px 20px 30px; 上10px 左右20px 下30px

padding: 10px 20px 30px 40px; 上10 右20 下30 左40

盒子大小问题：

边框和内边距可以改变盒子大小

盒子大小（宽度） = 内容的宽度+左右内边距+左右边框

边框

嵌套盒子padding值对盒子大小的影响：

“继承”的盒子，默认不设置宽度的情况下，给与盒子设置padding值在父盒子宽度范围内，不会影响盒子大小

1.7外边距

外边距：盒子与盒子之间的距离。移动盒子。

属性联写：与内边距联写一样

注意：外边距不会改变盒子大小

特点：垂直外边距合并，会以最大外边距的值为准

垂直外边距塌陷--》解决方式：

a.给父元素设置边框

b.给父元素设置overflow：hidden；

由于overflow：hidden触发了元素的bfc（格式化上下文），浏览器自动把这个元素独立出来（包裹性）

2.1 标准流（normal flow）

在页面中标签（元素）默认的显示方式就是标准流的显示方式

2.2 浮动

用法: float: left | right;

特点： 1.浮动的元素不占位置（脱标--脱离标准流的显示方式）

　　　 2.浮动可以让块级元素在一行上显示

3.可以进行元素的模式转换（行内块）

作用：

1. 图片文字环绕效果

2.让块级元素在一行上显示使用浮动

网页布局

制作导航

2.2.1清除浮动（清除浮动带来的影响）

清除浮动：

1.使用clear: left | right | both;

直接在浮动的元素后面增加一个空标签，在设置该空标签clear

2.给父元素设置overflow:hidden;

overflow:hidden: 可以将超出父元素的部分进行隐藏

3.使用伪元素清除浮动（推荐）

或者

调用者：

2.3 样式初始化

搜狐初始化：

/* 全局CSS定义 */

body{font-family:"\5B8B\4F53","Arial Narrow",HELVETICA;text-align:center;margin:0 auto;padding:;background:#FFF;font-size:12px;color:#333;}

body > div{text-align:center;margin-right:auto;margin-left:auto;}

div,form,ul,ol,li,span,p{margin:;padding:;border:;}

img,a img{border:;margin:;padding:;}

h1,h2,h3,h4,h5,h6{margin:;padding:;font-size:12px;font-weight:normal;}

ul,ol,li{list-style:none}

table,td,input{font-size:12px;padding:}

/* 默认链接颜色 */

a{outline-style:none;color:#333;text-decoration:none}

a:hover{color:#c00;text-decoration:underline;}

/*清除链接虚框*/

/*a,area {blr:expression(this.onFocus=this.blur()) }  for IE

:focus {-moz-outline-style: none; }  for Firefox

*/

自定义初始化

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd{

            margin: 0;

            padding: 0;

            list-style:none;

            font-size: 12px;

            font-family: "宋体","微软雅黑";

        }

        a{

            color: #000;

            text-decoration: none;

        }

        a:hover {

            color: red;

        }

        img,input{

            margin: 0;

            padding: 0;

            border: 0;

            outline-style: none;

        }

        .clearfix:after{

            content: "";

            height: 0;

            line-height: 0;

            display: block;

            clear: both;

            visibility: hidden;

        }

        .clearfix{

            zoom: 1;

        }

    </style>

</head>

<body>

</body>

</html>

2.4 overflow

京东下拉框例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

       .box{

           width: 300px;

           height: 50px;

           background-color: red;

           border: 1px solid black;

           overflow: hidden;

       }

       .list{

           height: 400px;

           background-color: yellow;

       }

       .title{

           height: 50px;

       }

       .box:hover{

           overflow:visible;

           cursor: pointer;

       }

    </style>

</head>

<body>

     <div class="box">

         <div class="title">全部商品分类</div>

        <div class="list">

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </div>

     </div>

</body>

</html>

导航练习:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd{

            margin: 0;

            padding: 0;

            list-style:none;

            font-size: 12px;

            font-family: "宋体","微软雅黑";

        }

        a{

            color: #000;

            text-decoration: none;

        }

        a:hover {

            color: red;

        }

        img,input{

            margin: 0;

            padding: 0;

            border: 0;

            outline-style: none;

        }

        .clearfix:after{

            content: "";

            height: 0;

            line-height: 0;

            display: block;

            clear: both;

            visibility: hidden;

        }

        .clearfix{

            zoom: 1;

        }

        .w{

            width: 1096px;

            height: 50px;

            margin: 0 auto;

        }

        .nav{

            height: 50px;

            background-color: #458FD2;

            line-height: 50px;

        }

        .l_list{

            float: left;

        }

        .r_list{

            float: right;

        }

        .nav li{

            float: left;

        }

        .nav li a{

            height: 50px;

            padding: 0 15px;

            display: block;

            color: #fff;

            text-decoration: none;

        }

        .nav li a:hover{

            background-color: #474E5D;

        }

    </style>

</head>

<body>

      <div class="nav">

        <div class="w">

            <div class="l_list">

                <ul>

                    <li><a href="#">前端开发</a></li>

                    <li><a href="#">前端开发</a></li>

                    <li><a href="#">前端开发</a></li>

                    <li><a href="#">前端开发</a></li>

                </ul>

            </div>

            <div class="r_list">

                <ul>

                    <li><a href="#">全栈开发</a></li>

                    <li><a href="#">全栈开发</a></li>

                    <li><a href="#">全栈开发</a></li>

                    <li><a href="#">全栈开发</a></li>

                    <li><a href="#">全栈开发</a></li>

                </ul>

            </div>

        </div>

      </div>

</body>

</html>

2.5伪元素

after:

before

选择区域：

3.定位（重点）

作用：通过定位可以移动元素位置

使用场景：当页面中出现盒子压盒子的效果时，推荐使用定位

定位特点：定位体现元素之间的层级关系

分类：

静态定位：

绝对定位：

相对定位：

固定定位：

<!--

        浮动元素的特点：

            1）脱标

            2）改变元素的显示方式

            3）显示方式与行内块一致

        定位有四种：

            1）静态定位（标准流）

                关键字： position: static;

            2）相对定位

                关键字： position: relative;

                特点：

                    1）相对于自己原本的位置发生的偏移。

                    2）没有脱标

                    3）没有改变元素的显示方式

            3）绝对定位：

                关键字： position: absolute;

                特点：

                    1）位置关系：

                        a:如果绝对定位的元素没有父元素，那么绝对定位的元素的位置是以body为基准发生平移

                        b:如果绝对定位的元素有父元素，但是父元素没有定位，那么绝对定位的元素的位置还是以body为基准发生平移

                        c:如果绝对定位的元素有父元素，并且父元素有定位（非静态）,那么绝对定位的元素的位置是以父元素基准发生平移的

                    2）脱标（不占位置）

                    3）改变了元素的显示方式

                    4）显示方式变为行内块元素

　　　　　　　4）固定定位
                    1）位置关系:
　　　　　　　　　　　　　　 a. 固定定位的元素始终是以body（浏览器 ）可视区域为参照设置定位
　　　　　　　　　　　　2)脱标（不占位置）
                    3)改变元素的显示方式
                    4）元素的显示方式变为 

            注意：

                一般情况下定位都要配合定位偏移属性来使用trbl：top,right,bottom,left

     -->

3.1.1静态定位

语法： position：static；

left：10px;

top:;

right:;

bottom:;

特点：静态定位不能移动元素位置

静态定位的元素就是标准流元素的显示方式

3.1.2绝对定位（要么看父容器要么看浏览器）

语法： position: absolute;

绝对定位的位置移动特点：

1.如果一个元素设置了绝对定位，如果该元素的父元素设置了静态定位或者没有定位，那么当前子元素是以body（浏览器的左上角）为参照进行位置移动

2.如果一个子元素设置了绝对定位，如果该子元素的父元素设置了除静态定位以外的其他定位，那么当前绝对定位的子元素会以父元素左上角为参照进行位置移动

绝对定位本身特点：

绝对定位的元素脱标不占位置

绝对定位可以实现模式转换

3.1.3相对定位（看自己定位）

语法：position：relative;

特点：

相对定位元素是以元素原来的位置为参照设置定位

相对定位的元素占位置

相对定位不能实现模式转换

一般情况下要设置子绝父相（子元素绝对定位，父元素相对定位）

3.1.4固定定位（死心眼子）

position：fixed；

特点：固定定位元素脱标不占位置

固定定位元素可以实现模式转换

固定定位的元素始终是以body（浏览器）可视区域为参照设置定位

3.2 Z-index(重点)

定位元素的特点：

1.只有定位（除静态定位）的元素有层级关系

2.通过z-index属性改变层级关系

层级关系的特点：

1.当给一个元素设置定位，那么该元素默认的层级 z-index值是auto(约为0),

　　　　　　 2.当z-index值相同的情况下，那么最后的定位元素层级要高于前面的定位元素【后来居上】

3.当z-index值不同的情况下，那么z-index值越大该元素的层级越高。

4.如果元素的父元素设置了z-index值，那么父元素的z-index值越大，那么该元素的层级越高

3.3定位盒子居中（了解）

盒子居中： margin: 0 auto; 标准流的盒子居中显示

绝对定位的盒子居中显示:

left:50%; 父元素宽度一半

margin-left: -元素自己宽度的一半

例子1：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box{

            width: 400px;

            height: 400px;

            border: 1px solid red;

            margin: 0 auto;

            position: relative;

        }

        .one{

            width: 200px;

            height: 200px;

            background-color: red;

            margin: 0 auto;

            position: absolute;

            left: 100px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="one"></div>

    </div>

</body>

</html>

更快的例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box{

            width: 400px;

            height: 400px;

            border: 1px solid red;

            margin: 0 auto;

            position: relative;

        }

        .one{

            width: 100px;

            height: 100px;

            background-color: red;

            margin: 0 auto;

            position: absolute;

            /*父元素的一半*/

            left: 50%;

            /*向元素自己的位置相反的方向移动*/

            margin-left: -50px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="one"></div>

    </div>

</body>

</html>

3.4 css标签包含规范

段落标签中不能包含标题标签

段落标签不能包含div

行内元素最好不要包含块级元素

3.5网页布局规避脱标流（了解）

网页布局优先考虑标准流

然后考虑浮动

最后使用定位

元素模式转换必须使用display

3.5．vertical-align属性

text-align 水平对齐

vertical-align 垂直对齐

默认行内块元素（img，input）,有默认的vertical-align属性

vertical-align: baseline ; （基线）默认值

top; 顶部对齐

middle; 中部对齐

bottom; 底部对齐

3.6CSS元素的可见性（了解）

overflow:hidden 将溢出部分隐藏

display: none; 元素隐藏不占位置

display: block; 显示元素

visibility:hidden; 元素隐藏占位置

3.7logo内容移除（了解）

Logo 一般推荐给a标签设置背景图片

Logl 中a标签最好设置文字

移除文字： text-indent: -9999px

3.8精灵图（掌握）

精灵图就是一种特殊的背景图片

使用：给元素设置精灵图为背景图片

通过background-position移动背景图片

注意：使用fw，精灵图要使用打开方式

4.1滑动门（补充）

作用：1.制作网页导航

2.滑动门导航使用背景图片制作

3.滑动门导航内容不能设置宽度

4.2vertical-align属性补充

让图片垂直居中方法之一设置行高和vertical-align

元素的显示方式:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /*

            总结：

                1）日常生活中的填充不会改变盒子的大小，但是在css中的填充（padding）一般会改变盒子的大小

                2）在特定的情况下padding是不会改变盒子大小的:在父元素中有一个子元素，并且子元素没有设置宽度，那么子元素的宽高会与父元素保持一致，如果这个时候设置padding-left，padding-right，是不会改变盒子大小的。

                3）行内元素不建议设置padding,如果给行内元素设置padding,上下padding不会有任何作用

            元素的显示方式：

                1）行内元素

                    一行内可以显示多个

                    不可以设置宽高

                    宽高由内容决定

                2）块级元素

                    独占一行

                    可以设置宽高

                    如果不设置宽高，宽度与父元素保持一致，高度由内容决定

                3）行内块元素

                    一行内可以显示多个

                    可以设置宽高

                    如果不设置宽高，宽高由内容决定

        */

        .one {

            width: 1000px;

            height: 200px;

            background-color: #ccc;

        }

        .two {

            height: 100px;

            padding-left: 100px;

            background-color: pink;

        }

        span {

            padding: 10px;

        }

    </style>

</head>

<body>

    <div class="one">

        <div class="two"></div>

    </div>

    <span>小追命</span>

</body>

</html>

CSS(中)篇的更多相关文章

html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
《手把手教你》系列技巧篇（十八）-java+ selenium自动化测试-元素定位大法之By css中卷（详细教程）
1.简介按计划今天宏哥继续讲解倚天剑-css的定位元素的方法:ID属性值定位.其他属性值定位和使用属性值的一部分定位(这个类似xpath的模糊定位). 2.常用定位方法(8种) (1)id(2)na ...
CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了
浮动基本介绍在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...
对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
CSS中"!important"的使用
本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...
原来css中的border还可以这样玩
原来css中的border还可以这样玩前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...
深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
举例详解CSS中的cursor属性
这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下一.开篇之言 CSS3的领域范围已经渗透到了 ...
使用CSS中的meta实现web定时刷新或跳转的方法
这篇文章主要介绍了使用CSS中的meta实现web定时刷新或跳转的方法,比使用JavaScript脚本实现起来更加简单一些,需要的朋友可以参考下 meta源信息功能之页面定时跳转与刷新几乎所有的网页 ...

随机推荐

ssm项目 maven 项目pon.xml 配置
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
Activiti 部分实用功能
helloworld中已经写了关于部署流程图,查询个人任务,完成个人任务部分.现在添加几个新的实用功能 1.判断流程是否完成,代码如下 public void isProcessEnd() { Str ...
python 创建txt每行写入
txtPath=os.path.join(vocDir,"eval.txt") with open(txtPath,"w") as f: f.writeline ...
分批次删除大表数据的shell脚本
#!/bin/bash # 分别是主机名,端口,用户,密码,数据库,表名称,字段名称 readonly HOST="XXX" readonly PORT=" readon ...
final,finally和finalize之间的区别
(1)final用于声明属性,方法和类,分别表示属性不可变,方法不可覆盖,类不可继承.内部类要访问局部变量,局部变量必须定义成final类型,比如一段代码 (2)finally是异常处理语句结构的一部 ...
JavaSE_02_Thread类01
1.1 并发与并行并发:指两个或多个事件在同一个时间段内发生. 这在单 CPU 系统中,每一时刻只能有一道程序执行,即微观上这些程序是分时的交替运行,只不过是给人的感觉是同时运行,那是因为分时交替运 ...
China Final J - Mr.Panda and TubeMaster
和一般的管道不同不能类似“无限之环”或者“弯弯国”的建图,因为这两个题都是某些位置必须有,或者必须没有但是本题可以有的位置随意,不能限制某个位置要么流2,要么流0,(实际上可能流了1过去) 所以建 ...
基于Skyline与ArcGIS Server的二三维联动功能实现
基于Skyline与ArcGIS Server的二三维联动功能实现主要利用WEB技术.ArcGIS for JavaScript.Skyline 二次开发以及ArcGIS 10.1 桌面工具. 利用A ...
PAT甲级——A1039 Course List for Student
Zhejiang University has 40000 students and provides 2500 courses. Now given the student name lists o ...
深喉起底APP线下预装市场，如何一夜间拥有千万用户
注:预装对于中国的移动互联网创业者有多重要?i黑马知道这样一个内幕,某商务告诉我他们公司的前2000万用户就是靠预装打下来的,总部在北京,直接派驻商务长期扎根在深圳搞定手机厂商.而这家公司初期发展得益 ...

CSS(中)篇

元素的显示方式:

CSS(中)篇的更多相关文章

随机推荐

热门专题