码迷,mamicode.com
首页 > Web开发 > 详细

CSS+DIV布局(一)

时间:2018-11-05 11:31:08      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:over   去掉   fir   溢出   一个   class   har   20px   html   

*************************使用CSS+DIV布局*******************************

 


********************************盒模型*******************************

html中每一个元素(标签)都是一个盒子,遵循盒模型


盒模型宽度

1.内盒模型

不带边距的

 

2.外盒模型

算上边距


一般讨论的都是内盒模型的大小(即元素本身的大小),firefox右键查看元素显示的宽度、高度
为内盒模型的大小...

 

补白会继承内容的背景颜色


演示代码:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>演示盒模型</title>


<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style type="text/css">
* {
margin:0px;
}

div.divClass1 {
width:100px;
height:100px;
padding:20px;
border:2px solid #000000;
background-color: yellowgreen;
}
</style>

</head>

<body>
<div class="divClass1">
我是div1
</div>
</body>
</html>

 

********************************盒模型边距问题*******************************

如果给两个div同时都设置了边距,注意两个div的边距大小 不是边距之和

而是取边距比较大的那个

 


**********************块级元素)和行内元素的区别(div和span的区别)*****************

块级元素(Block Element)

行内元素(Inline Element),也叫内联元素


排列方式 宽、高、边距 默认宽度 典型代表

块级元素(div) 垂直排列 可调 和父容器一样宽 div、p、h1

行内元素 (span) 水平排列 宽、高不可调、边距(水平可调、垂直不可调) 和内部元素的宽度一样宽 span、a、label

 

如何区分一个元素是块级元素还是行内元素???

 

********************************块级元素和行内元素相互转换*******************************

使用display属性

1. 块级元素------------>行内元素


display:inline;


转成行内元素以后 变成了行内元素的特征


2. 行内块

display:inline-block;


水平排列的块级元素


行内块有默认间隔 如果想去掉默认间隙,可以使用 负边距、去掉空白、加注释的方式,但是都比较麻烦、代码可读性差,


如果想让div水平排列 不推荐使用 行内块 应该使用浮动(稍后再说)

 

3.行内元素----->块级元素


display: block;

 

********************************overflow属性***********************************************

overflow


1.默认值是visible

可见的,文字如果多长,会溢出


2.hidden

隐藏的


3.scroll

加滚动条

不管内容超不超长 都加滚动条


4.auto


如果内容不超长 不加滚动条

超长 自动加滚动条

 

*******************************word-break**************************************


word-break


默认值是 normal 按照浏览器默认的 断句规则 显示

 

CSS+DIV布局(一)

标签:over   去掉   fir   溢出   一个   class   har   20px   html   

原文地址:https://www.cnblogs.com/MrTanJunCai/p/9907558.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!