CSS盒子模型+浮动qing'chu+字体+背景
来源:互联网 发布:win10usb端口上的电涌 编辑:程序博客网 时间:2024/05/16 05:18
CSS盒子模型+浮动清除+字体+背景
盒子模型:也称为盒子模型或者框模型
每一个封闭区域我们都可以把它看做一个盒子模型,依照盒子的属性来确定区域的样式
盒模型的区域划分:
margin(外边距) - 清除边框外的区域,外边距是透明的
border(边框) - 围绕在内边距和内容外的边框
padding(内边距) - 清除内容周围的区域,内边距是透明的
content(内容) - 盒子的内容,显示文本和图像
关于盒子模型的相关属性:
width(宽度)- 设置模型的内容宽度
height(高度)- 设置模型的内容高度
padding(内边距)- 设置模型的内边距的距离
margin(外边距)- 设置模型的外边距的距离
border(边框)- 设置模型的边框大小
margin和padding都有两种设置的方式:
1、直接margin或padding再加上参数,表示默认上下左右的margin和padding都为参数值
2、margin或padding再加上“-”再加上下左右,表示只设置上下左右一边
注意:塌陷现象:对于两个盒子的同一边进行margin设置时,margin区域会重叠,值取较大的一个
常用:父子盒子之间用padding,兄弟盒子之间用margin
如果父子盒子之间用margin,则可能引起的问题就是父子盒子之间的上边距(margin-top)重合
解决方法:1、给父盒子设置边框2、用overflow属性来解决
浮动清除:
首先先要认识文档流:标准文档流:是指元素排版布局过程中,元素会自动从左往右,从上往下的流式排列
典型的文档流:word排版,html所有排版方式,类似于word中的文档排版,遵循排版规则
文档流中元素分类:内联元素(行内元素),块级元素
块级元素的特点:
(1)所有块级元素独自占有一行,不能和其他元素共享一行
(2)可以根据盒模型特性设置宽高内外间距,如果不设置宽度,则默认填充父级元素的宽度
(3)内部可以继续容纳其他元素
(4)元素包括:div、dl、h系列、hr、ul、li、ol、table、p等
内联元素的特点:
(1)默认和其他元素在同一行
(2)不遵循盒模型特性设置,宽高只和内容有关
(3)元素包括:文本标签(a、b、u、font、span )、input、label、textarea、img、select等
块级元素和内联元素相互转换:
块级元素->内联元素:增加css属性display:inline
内联元素->块级元素:增加css属性 display:block
如果想要元素既有块级元素的特点,又有内联元素的特点:增加css属性 display:inline-block
脱标实现:
定义:让标签脱离标准文档流的约束限制,独自进行定位设置
约束:一般脱标设置的都是块级元素(内联元素可以脱标,不常用)
实现方式:浮动、绝对定位、固定定位
浮动说明:
(1)给元素的float属性赋值后,标签会脱标,停留在浮动层
(2)浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去
(3)如果填充的元素为块级元素且发生了重叠,浮动元素覆盖块级元素
(4)如果之前是内联标签,浮动后,是可以设置宽高度(因为脱标了)
注意:所有脱标的元素,都符合盒模型的约束规则(不管是块级元素还是内联元素)
浮动带来的问题:
(1)不同区域的浮动元素同行贴边
(2)浮动子元素不能撑开父容器的高度
(3)浮动子元素的父容器背景无法正常显示
如何解决浮动问题:
(1)通过对父级容器设置适合CSS高度
(2)通过overflow属性清除浮动
(3)通过设置clear属性清除浮动
字体属性的常用设置:
(1)字体大小:font-size:以像素为单位设置字体大小、以百分比设置字体大小、变量值(small、larger);单位模式:px、em
(2)行高:line-height:以像素为单位设置每行的高度值、百分比设置行高
(3)字体:font-family:设置字体的样式,如“黑体”、“宋体”等
三合一的写法格式如下:font:字体/行高 字体
背景图片的获取:
background-image属性,取值方式:url(地址)
设置背景图片重复方式:
background-repead属性,取值方式:no-repeat(不重复,只设置一次)、repeat-x(水平一横平铺)、repeat-y(竖直一列平铺)
设置背景图片位置:
background-position属性
取值方式1:x坐标 y坐标
取值方式2:left、right、top、bottom、center
一行写法:background:属性1 属性2 属性3
- CSS盒子模型+浮动qing'chu+字体+背景
- CSS中的字体背景和盒子模型
- css背景样式 列表样式 盒子模型 浮动
- CSS盒子模型和浮动
- CSS背景、尺寸、盒子模型
- css学习记录2-盒子模型-浮动
- CSS笔记(盒子模型与浮动)
- css盒子模型与div浮动详解
- css中的盒子模型及其浮动
- CSS之盒子模型的浮动
- CSS 基础点集锦一:盒子模型、浮动、清除浮动
- 盒子模型-浮动-1
- CSS属性,盒子模型以及浮动和定位技术相关
- CSS(三)解析盒子模型的浮动
- CSS核心内容-标准流、盒子模型、浮动、定位
- CSS核心内容-标准流、盒子模型、浮动、定位
- CSS基础之盒子模型及浮动布局
- css浮动与盒子
- Android 简单断点续传|下载到本地
- HDOJ 1393 Weird Clock
- final
- 嵌入式c语言高级编程技巧 之 结构体的对象思维。
- 设计模式——观察者模式
- CSS盒子模型+浮动qing'chu+字体+背景
- Java 多线程核心技术梳理(附源码)
- 数据预处理总结
- 树和森林——树的同构
- Infogan-信息最大化生成对抗网络(理论部分)
- c++类和动态内存分配
- python练习题1 计算多个DNA序列中,GC比最高的序列
- LaTeX新人教程,30分钟从完全陌生到基本入门
- redis长时间失去响应