您的位置：首页 > Web前端 > CSS

html 盒子模型基础（display ，overflow，默认样式）（四）

2017-02-07 10:03 423 查看

1.display（重要属性）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

.s1{

/*
display
* 		- 这个样式可以用来设置元素的显示方式
* 		- 可以设置一个元素到底是块元素还是内联元素
* 		- 可选值：
* 			- block,元素将会作为块元素显示
* 			- inline,元素将会作为内联元素显示
* 			- inline-block,元素将会作为行内块元素显示
* 				所谓行内块，就是元素既有块元素的特点，也有内联元素的特点
* 				既可以设置宽高，又不会独占一行
* 			- none,元素不会在页面中显示,并且不再占据页面的位置
*
*/

display: inline-block;

background-color: yellow;
/*设置宽和高*/
width: 100px;
height: 100px;
}

.box1{
width: 100px;
height: 100px;
background-color: red;
/*display: none;*/

/*
visibility
- 用来设置元素是否可见
- 可选值：
visible，默认值，元素在页面中可见
hidden，元素在页面中不可见	，但是元素依然占据页面的位置
* */
visibility: hidden;

}

</style>
</head>
<body>

<div class="box1"></div>

<span class="s1">
我是一个小span
</span>
<span class="s1">
我是一个小span
</span>

</body>
</html>

效果：

2.overflow（重要属性）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
overflow
- 可选值：
visible，默认值，溢出的内容会在父元素外显示
hidden，	溢出的内容将会被减去，不再显示
scroll，将溢出的内容隐藏，通过拖动滚动条来查看完整内容
- 该样式不论内容是否溢出，都会默认为父元素添加水平和垂直两个方向的滚动条
auto，根据内容自动生成滚动条，需要哪个方向的就生成那个方向的，
如果都不需要则都不生成
* */
overflow: auto;
}

.box2{
/*
子元素都是在父元素的内容区中摆放的
如果子元素的大小超过了父元素，则超出父元素的内容将会在在父元素以外的位置显示
超出父元素的内容，我们称为溢出的内容
可以通过overflow来设置元素，处理溢出内容的方式
* */
width: 100px;
height: 400px;
background-color: red;
}

</style>
</head>
<body>

<div class="box1">

<!--<div class="box2"></div>-->
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。
我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。
枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。
鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。
哇的一声，夜游的恶鸟飞过了。
我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。
后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。
猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。
我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。
一九二四年九月十五日。

</div>

</body>
</html>

效果：

3.默认样式（重要设置）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

/*
默认情况下，浏览器都会为一些元素添加一些默认的样式
比如 body都会有一个默认的外边距，但是这些默认样式我们开发中并不需要
所以我们就需要去除这些默认样式
* */
/*去除所有元素的默认内外边距*/
*{
margin: 0;
padding: 0;
}

ul{

/*
list-style: none;
可以将列表的项目符号去除
* */
list-style: none;
}

.box1{
width: 100px;
height: 100px;
background-color: red;
}

</style>
</head>
<body>
<div class="box1"></div>

<p>我是一个段落</p>

<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html 经验

相关文章推荐

新的分享

章节导航