web学习笔记---css(2)

SkyeBCI

于 2018-07-04 16:29:17 发布

阅读量384

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/void_worker/article/details/80914809

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CCS学习系列笔记
web学习笔记–css(1)
web学习笔记–css(2)
web学习笔记–css(3)

web学习笔记—css(2)

4.通配符

4.通配符
“*”，不建议用
降低页面加载速率
数据库：select * from table

<style>
*{
color: lightcoral;
}
</style>

5.盒模型

盒模型的5个基本属性：宽度、高度、内边距、边框、外边距
盒模型图
这里写图片描述

5.1宽度width

指内容区的宽度，图中的蓝色部分

5.2高度height

指内容区的高度，图中的蓝色部分

5.3内边距padding

图中的绿色部分
一个参数代表四个方向都是40px；两个参数先上下，再左右（40px，20px表示上下为40，左右为20）；三个参数（padding: 40px 20px 30px，左边的没有值，会默认和右边的一致，表示上为40，左右为30，下为20）；四个参数是顺时针方向（padding: 40px 20px 30px 10px;上右下左四个方向）

5.4边框border

图中的黄色部分
三个参数：粗细线型颜色
颜色缺省默认黑色
粗细缺省默认3px
线型缺省则不显示border

5.5外边距margin

图中的红色部分，指两个盒子的距离

总的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
/*标签有自带的margin，要用通配符将其去掉*/
*{
margin: 0px;;
}
div{
width: 460px;
height: 460px;

/*可以总起来写，也可以分方向写*/
padding: 40px 20px 30px;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 20px;

/*可以总起来写，也可以分方向写*/
border: solid red;
border-top: 10px solid red;
border-right: 20px dotted yellow;
border-bottom: 10px double purple;
border-left: 15px dashed green;

/*标签有自带的margin，要用通配符将其去掉*/
/*margin:30px 100px;*/
margin: 30px auto;
/*设置版心居中*/
/*auto缩放的时候在中间缩放*/

}
</style>
</head>
<body>
<div>
我是一个盒子
</div>

</body>
</html>

6.标准文档流

6.1标准文档流里面的微观现象

1）空白折叠现象
如果元素之间的空格超过一个以上，则在页面里面显示的时候元素中间只有一个空格，想去掉这个空格，则需要连起来写
2）高矮不齐时，底边对齐
3）自动换行：一行写不满，则换行写

6.2 css里面的标签分类：

html标签分类：
容器级元素(h1-h6、div、ul、li、ol、li、dl、dt)
文本级元素(p、img、a、i、b、u、span、strong、em)
css标签分类：
1）块级元素
01块级元素独自霸占一行，不和其他任何元素并列显示
02可以接受宽和高
03如果不给块级元素加宽度，那么它的宽度会变成父亲的100%
块级元素：h1-h6、div、ul、li、ol、li、dl、dt、p

2）行内元素
html里面的容器级元素都是css的块级元素
01行级元素同占一行
02不可以接受宽和高

html里面的文本级元素是css的行级元素，p标签除外

块级和行内的转换：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
p{
padding: 0px;
width: 100px;
height: 100px;
background-color: red;
color: white;
/*将块级转换为行级*/
display: inline;
}
span{
width: 100px;
height: 100px;
background-color: green;
/*将行级转换为块级*/
display: block;
}
div{
height: 300px;
width: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<p>我</p>
<p>是</p>
<p>块</p>
<p>级</p>

<span>我</span>
<span>是</span>
<span>行</span>
<span>级</span>

<div>
我
</div>

</body>
</html>

一个小案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点击我隐藏/显示图片" id="btn">
<br>
<img src="../img/blue.png" alt="" id="pic">
<script>
var btn=document.getElementById("btn");
var pic=document.getElementById("pic");
var sta = 1;
btn.onclick = function fun(){
if(sta == 1){
pic.style.display = "none" ;
sta = 2;
}
else{
// 让图片显示
pic.style.display="block" ;
sta = 1;
}
}
</script>
</body>
</html>

6.3脱离文档标准流

标准文档流里面有很多的规则很多性质，如果我们想让元素在一行上面显示的同时还可以设置宽和高的话，就要脱离文档标准流
css里面脱离文档标准流的方式：
1）浮动
2）绝对定位
3）固定定位

7.浮动

7.1 浮动的性质

性质1：浮动元素脱离文档标准流
性质2：浮动的元素互相贴靠
性质3：自围效果

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

这里写图片描述

效果3如下图所示：
粉色图形会盖住绿色，但不会盖住文字
这里写图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字图效果</title>
<style>
*{
padding: 0px;
margin: 0px;
}
p{
width: 100px;
height: 100px;
background-color: hotpink;
float:left ;
}
div{
width: 900px;
height: 900px;
background-color: green;
color: #ffffff;
}
</style>
</head>
<body>
<p></p>
<div>
START
标准文档流里面有很多的规则很多性质，如果我们想让元素在一行上面显示的同时还可以设置宽和高的话，就要脱离文档标准流
css里面脱离文档标准流的方式：
1）浮动
2）绝对定位
3）固定定位
7.浮动
性质1：浮动元素脱离文档标准流
性质2：浮动的元素互相贴靠
标准文档流里面有很多的规则很多性质，如果我们想让元素在一行上面显示的同时还可以设置宽和高的话，就要脱离文档标准流
css里面脱离文档标准流的方式：
1）浮动
2）绝对定位
3）固定定位
7.浮动
性质1：浮动元素脱离文档标准流
性质2：浮动的元素互相贴靠
</div>

</body>
</html>

7.2 浮动的清除

共3种方法

7.2.1给父级元素加高度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0px;
margin: 0px;
}
/*浮动的清除：给box1加高度*/
.box1{
height: 50px;
background-color: red;
}
ul{
list-style: none;
}
li{
/*增加浮动*/
float: left;
width: 100px;
height: 50px;;
background-color: lightblue;
line-height: 50px;;

}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>娃哈哈</li>
<li>喜之郎</li>
<li>可比克</li>
<li>卫龙</li>
</ul>
</div>

<div class="box2">
<ul>
<li>吃鸡</li>
<li>王者</li>
<li>阴阳师</li>
<li>连连看</li>
</ul>
</div>
</body>
</html>

注意点：如果一个元素要浮动，那么它的祖先元素一定要有高度，有高度的盒子才能关注浮动。

7.2.2 clear：both

当无法给父级元素加高度时，用clear：both
clear:both 清除两边浮动对我盒模型本身的影响
缺点：向上的外边距会失效

.box2{
/*浮动的清除方法2：*/
/*浮动的性质：互相贴靠，box1和box2互相贴靠，用clear清除box1浮动对box2的影响*/
clear: both;
/*缺点：向上的外边距会失效*/
margin-top: 30px;
}

7.2.3 内隔法/隔墙法

（这种方式一定要会）
清除浮动用第3种方式
假设现在有2个块级元素（父级元素），2个块级元素中间分别有4个块级元素（子元素），想让2个父级元素上下显示（上下之间无距离/有距离），父级元素中的元素左右显示（在同一行内），具体效果如下图：
这里写图片描述
那么需要新增加1个块级元素，对该块级元素clear:both，这样两个块级元素上下之间的距离就是这个盒子的height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        /*浮动的清除方法1：给box1加高度*/
        /*.box1{*/
            /*!*height: 50px;*!*/
            /*background-color: red;*/
             /*margin-bottom: 100px;*/
        /*}*/
        .box2{
            /*浮动的清除方法2：*/
            /*浮动的性质：互相贴靠，box1和box2互相贴靠，用clear清除box1浮动对box2的影响*/
            clear: both;
            /*缺点：上边距会失效*/
            /*margin-top: 30px;*/
        }
        ul{
            list-style: none;
        }
        li{
            /*增加浮动*/
            float: left;
            width: 100px;
            height: 50px;;
            background-color: lightblue;
            line-height: 50px;;
        }
        .c{
            /*浮动的清除方法3：内隔法*/
            /*思想是：在两个块级元素之间再加一个盒子，对该盒子clear:both,这样两个块级元素上下之间的距离就是这个盒子的height*/
            clear:both;
            margin: 0px;
            border: 0px;
            padding: 0px;
            height: 0px;
            /*background-color: red;*/
        }
    </style>
</head>
<body>
<div class="box1">
    <ul>
        <li>娃哈哈</li>
        <li>喜之郎</li>
        <li>可比克</li>
        <li>卫龙</li>
    </ul>
</div>

<div class="c"></div>

<div class="box2">
    <ul>
        <li>吃鸡</li>
        <li>王者</li>
        <li>阴阳师</li>
        <li>连连看</li>
    </ul>
</div>
</body>
</html>

SkyeBCI

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web学习笔记---css(2)

web学习笔记—css(2)4.通配符5.盒模型5.1宽度width5.2高度height5.3内边距padding5.4边框border5.5外边距margin6.标准文档流6.1标准文档流里面的微观现象6.2 css里面的标签分类：6.3脱离文档标准流7.浮动4.通配符4.通配符 “*”，不建议用降低页面加载速率数据库：...
复制链接

扫一扫