阅读模式:

CSS 学习(3)

阅读量:20  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:CSS 学习(3)盒子模型盒子的组成border边框,content内容,padding内边距,margin外边距。边框(border)border-with:边框的粗细(一般情况下使用px为单位),未指定边框样式没法显示。border-s......

CSS 学习(3)

CSS 学习(3)

盒子模型

盒子的组成

border边框,content内容,padding内边距,margin外边距。

边框(border)

border-with:边框的粗细(一般情况下使用px为单位),未指定边框样式没法显示。

border-style:边框的样式(solid实线,dashed虚线,dotted点线)。

border-color:边框的颜色。

复合性写法:border:1px solid red;(三个属性可以不分顺序)

边框4条边分开写:border-top,border-bottom,border-left,border-right

用css替换原先html代码:

    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500px" height="249">
        <thead>
        <tr>
            <th>名称</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>苹果</td>
            <td>10</td>
        </tr>
        </tbody>
    </table>
    <style>
        table {
            width: 500px;
            height: 249px;
        }
        table,
        td,
				th {
            border: 1px solid pink;
            /* 合并相邻边框 */
            border-collapse: collapse;
        }
    </style>

边框会影响盒子的实际大小,盒子实际的大小=边框大小+原本盒子大小。

内边距(padding)

padding-left,padding-right,padding-top,padding-bottom设置边框和内容的间隔。

复合写法:

  • padding:5px;代表上下左右都有5px
  • padding:5px 10px;代表上下时5px,左右时10px
  • padding:5px 10px 20px;代表上5px,左右10px,下20px
  • Padding:5px 10px 20px 30px;代表上5px右10px下20px左30px(顺时针)

内边距也会影响盒子的大小,盒子实际大小=内边距大小+原本盒子大小

如果盒子未指定width/height(继承父亲的width/height也算未指定),那么padding就不会撑大盒子。

外边距(margin)

margin-left,margin-right,margin-top,margin-bottom设置盒子和盒子之间的距离

复合写法和padding一样。

块级元素水平居中的方法:块级盒子设置width,然后使用margin: 0 auto;便可以实现块级盒子水平居中。

行内元素水平居中的话让其父亲添加:text-align:center;

相邻块元素垂直合并问题

上下两个块级元素上面有一个margin-bottom下面有一个margin-top,则两个块级元素间的外边距取最大的那个值,而不是相加后的值。

解决方法:上下块级元素只添加一个外边距。

父元素的塌陷问题

对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

解决方法:

  1. 可以为父元素定义上边框
  2. 可以为父元素定义上内边距
  3. 可以为父元素添加overflow:hidden(推荐)

清除盒子的内外边距

网页元素可能带有默认的内外边距。

* {
	margin: 0;
	padding: 0;
}

行内元素比较特殊,为了照顾兼容性,尽量设置左右内外边距,不要设置上下内外边距。但转换为块级和行内块元素就可以了。

圆角矩形(CSS3新增)

border-radius:length设置成圆角边框。

半径为length的圆放四个角落。

length可以是像素也可以是百分数。

如果要设置四个角为不同的圆角,则可以写为border-radius:10px 20px 30px 40px;分别表示左上、右上、右下、左下。

如果设置单独的一个角:border-top-left-radius

盒子阴影(CSS3新增)

box-shadow:h-shadow(水平阴影位置,必须) v-shadow(垂直阴影位置,必须) blur(模糊距离,影子的虚实程度) spread(阴影尺寸,影子的大小) color(阴影颜色) inset(外部阴影改为内部阴影);

文字阴影(CSS3新增)

text-shadow:h-shadow v-shadow blur color;

CSS浮动

网页的三种传统布局方式:

  • 普通流(标准流/文档流):块级元素和行内元素按找规定排序
  • 浮动
  • 定位

浮动(float)

浮动可以改变元素的默认排序方式,float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

一般使用标准流的父元素排列上下布局,然后使用浮动元素在父元素中排列左右的布局。多个块级元素总想排列找标准流,多个块级元素横向排列找浮动。

float {float:属性值} (属性值:none,left,right)

浮动特性

  • 浮动元素会脱离标准流(脱离标准流的控制(浮)移动到指定位置(动),(俗称脱标),不再保留原先的位置,浮动只会压住后面的标准流 )
  • 浮动的元素会一行内显示并且元素顶部对齐
  • 浮动的元素会具有行内块元素的特性

清除浮动

清除浮动的本质是清除浮动元素造成的影响,清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。

选择器{clear:属性值;}

left:不允许左侧有浮动元素

right:不允许右侧有浮动元素

both:同时清除左右两侧浮动的影响

清除浮动的方法:

  1. 额外标签法也称为隔墙法,是W3C推荐的做法
  2. 父级添加overflow属性
  3. 父级添加after伪元素
  4. 父级添加双伪元素
/* 方法一:在浮动元素的最后再添加一个额外元素(必须是块级元素),使用clear: both */
.clear {
	clear: both;
}
/* 方法二:给父元素添加代码 */
.father {
	/* 清除浮动,其中的值为hidden、auto、scroll都可以 */
	overflow: hidden;
}
/* 方法三: 给父元素添加代码(是隔墙法的升级版,由css生成了额外元素)*/
.clearfix:after{
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix{
  /* 兼容IE6和IE7 */
  *zoom: 1;
}
/* 方法四:给父元素添加代码 */
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix{
	*zoom: 1;
}

需要清除浮动的情况:

  1. 父级没高度。
  2. 子盒子浮动了。
  3. 影响下面布局了,我们就应该清除浮动了。
分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: