이 기사에서는 박스 모델 및 플로팅과 관련된 문제를 주로 소개하는 css에 대한 관련 지식을 제공합니다. 웹 페이지 레이아웃의 본질은 CSS 레이아웃을 통해 박스 모델을 적절한 위치에 배치한 후 배치하는 것입니다. 필수 요소를 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
(동영상 공유 학습: css 동영상 튜토리얼, html 동영상 튜토리얼)
웹 페이지 레이아웃의 핵심은 CSS 레이아웃을 통해 상자 모델을 적절한 위치에 배치한 다음, 적절한 위치에 넣어주세요
박스 모델은 요소 내용, 내부 여백, 외부 여백, 테두리로 구성됩니다.
표준 박스 모델
border : border-width || border-style || border-color
Attributes | Function |
---|---|
border-width | 테두리 두께 정의, 단위 px |
border-style | 테두리 스타일 정의 |
테두리 색상 | 정의 테두리 색상 |
테두리 스타일
테두리 한쪽의 스타일을 개별적으로 설정
border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;
bottom, left, right
등등bottom,left,right
以此类推
表格边框
通过cellspacing=0
Table border
By cellspacing=0
으로 셀 거리는 0이지만 두 셀 사이의 테두리가 겹칩니다. 테두리를 두껍게 변경합니다. CSS 속성
table{border-collapse:collapse}
border-radius:length;/*length 可以数字也可以百分比*/
left padding | |
오른쪽 패딩 | |
top padding |
bottom padding
은 줄여서 쓸 수도 있습니다 | |
---|---|
패딩: 상단, 아래쪽, 왼쪽 및 오른쪽 패딩 | |
padding: 위쪽, 아래쪽, 왼쪽 및 오른쪽 | |
padding: 위쪽, 왼쪽, 오른쪽, 아래쪽 |
padding: 위쪽, 오른쪽 , 아래쪽, 왼쪽(시계 방향)
내부 상자 크기 계산
상자의 실제 크기 = 콘텐츠의 너비와 높이 + 패딩 + 테두리
너비를 직접 지정하지 않으면 패딩이 적용되지 않습니다. 상자를 열면 그렇지 않으면 열립니다
Margin은 상자 사이의 거리를 조절하는 것입니다 | |
---|---|
left margin | |
top margin |
块级盒子水平居中
盒子必须指定宽度,然后左右外边距设置为auto
.nav{width:960px;margin:0 auto;}
常见的写法,以下下三种都可以。
文字居中与盒子居中的区别
盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
块级盒子水平居中 左右margin 改为 auto
插入图片与背景图片区别
插入图片移动位置只能靠 padding与margin
背景图则使用background-position
清楚元素内外边距
* { padding:0; margin:0; }
外边距合并
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。
解决方案:尽量给只给一个盒子添加margin值。
嵌套块元素垂直外边距的合并
对于父子块元素,父元素会与子元素合并,父元素没有上padding和边框,合并时外边距取较大值
解决方案:
可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow:hidden。
区分出父子元素
盒子布局稳定性
width>padding>margin
稳定性依次减小,padding会撑开盒子,margin在合并时也会有问题
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;/*单位px*/
值 | 描述 |
---|---|
h-shadow | 必需,水平阴影,负值在左边 |
v-shadow | 必需,垂直阴影,负值在下 |
blur | 可选,模糊距离 |
spread | 可选,阴影尺寸 |
color | 可选,阴影颜色 |
inset | 可选,内阴影 |
注意
水平垂直阴影必须,其余可以省略,外阴影(outset)默认不写
p { box-shadow:0 15px 20px rgba(0,0,0,.5) }
css布局的三种机制
1. 普通
2. 浮动
使得盒子浮动起来。让多个块级盒子一行展示
3. 定位
将盒子定位于浏览器中的某一位置
通过浮动可以使得多个p水平排列一行,且之间没有空白缝隙,实现左右对齐,最早使用于图片,实现文字环绕效果
选择器 {float: 值;}
属性值 | 描述 |
---|---|
none | 不浮动(默认) |
left | 元素向左浮动 |
right | 元素向右浮动 |
注意
浮动托标使用浮动后,元素会脱离标准流,后续的标准流会移动至浮动盒子底下,浮动元素会“漂浮”
浮动会改变 元素display
属性,任何元素都可以浮动,浮动元素相互紧靠,父级宽度装不下时,多出盒子调至下一行
浮动与标准流搭配
给浮动元素添加一个标准流父亲,在子元素使用浮动,从而较少对其他标准流的影响
浮动元素与父盒子关系
子盒子会与父盒子对齐,但不会与边框重叠,也不会超过父盒子的内边距
浮动元素与兄弟盒子关系
浮动元素只会影响当前以及后面的标准流盒子
如果一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动。防止引起问题
很多子元素浮动后,父元素很难直接给出高度,最后父级盒子高度为0,对于以后的标准流盒子会有影响,对于标准流,子盒子会撑开盒子,而浮动不会。
清除就是为了消除浮动布局对于后续排版影响,主要是解决父元素高度为0的问题
选择器 {clear: 属性值;}
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(消除左侧浮动影响) |
right | 不允许右侧有浮动元素(消除右侧浮动影响) |
both | 同时清除左右浮动元素 |
额外标签法
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <p></p>,或则其他标签br等亦可。
优点: 通俗易懂,书写方便
父级添加overflow属性
overflow : hidden|auto|scroll
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
使用after为元素清除浮动
:after
方式是额外标签升级方式
.clearfix:after{ content:""; display:block;height: 0;clear:both; visibility: hidden; } .clearfix {*zoom: 1;}
双伪元素
.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }
위 내용은 CSS 표준 상자 모델 및 플로팅 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!