html css盒子顶层,HTML学习之四CSS盒子
CSS盒子模型
Content, padding(内补丁), border; margin(外补丁);
计算宽度,左右内外边界,左右内外边框,内容,左右内外边距。
如果上下左右四个参数,顺序:上右下左,依次写出padding: 0,0,0,0; 两个值:上下 左右;
三个值:上 左右 下。没有值的去对面找。
Padding-left, top, right, bottom.
使用外边距时注意浏览器兼容性。
除了值为0的情况,其他所有值后面都要是像素为单位,加px。
基本上所有网站,都把padding 和margin设为0. 因为各浏览器都设置了内外边距的不同默认值。所以为了兼容性,将所有内外边距都设为0. 或都从0开始。
所以用到哪些元素,就把那些元素的默认值归零。用到哪些HTML元素,就重置他们的边距。因为他们有自己默认的边距,要控制它,就重置。
CSS模型主要通过盒子模型实现。
内容:width, height
边框:margin, padding.
继承性,有的继承,有的不能继承。
列表,符号都存在兼容性问题,所以:ul, ol {list-style:none;}都设为无。
边框border属性:border-width;border-style;border-color。
如果只写border,那就直接跟着三个值。
单独控制一条边:border-top。顺序一样。
margin:100pxauto; 左右水平居中。
文字垂直居中: height:50px;
line-height:50px;
CSS元素分类,块状,内联(行内)。
块状:改变:{display:block}。可以容纳内联元素和其他元素。但是排斥同一行内的其他元素。内敛元素中能容纳文本或者其他内联元素,但是宽高不起作用。
Display设置对象如何显示。
可以将某个元素从内联改为block。用display。都有默认值,有的是inline,有的是block。
背景:background:颜色 图片 平铺方式(重复) 固定方式 位置
图片默认:水平、垂直平铺。默认左上角显示。
background-color:gold;
background-image:url(../pic/bupt.jpg);
background-repeat:no-repeat; 不让它平铺。
background-position:right bottom; 设定位置。
background-position:50px 30px; 横坐标,纵坐标。
background-attachment:fixed;/scroll;背景图片是否随着背景滚动。依附方式。将图片固定在屏幕某个地方,而不是盒子某个地方。
Ie6只有HTML 和body支持这个属性。
图片的翻转效果:两张大小相同,内容不同,正常显示一张。鼠标经过显示另一张。
CSS精灵技巧,为了减少http请求。将两个颜色不同的内容一样的图片合为一张图片,调整其位置。
Div+css页面布局。
1. 默认。Html结构顺序。
2. 浮动属性:float:center;
3. 定位。屏幕某个位置。
#two {background:green;position:absolute;
top:50px; left: 150px;}
浮动:取消元素的霸道属性(独占一行!)后面的元素将视其不存在。只有两个:要么left要么right。
飘到父元素边界。
浮动的元素相当于消失了,原来霸占的地方就空了。后面的元素补充。存在浏览器兼容性。
浮动布局几个图片:飘起来啦!
#p1 {float:left; margin:30px;}
#p2 {float:left;margin:30px;}
#p3 {float:left;margin:30px;}
#p4 {float:left;margin:30px;}
有的兼容,有的不兼容,就可能挡住了,看不到了。
清楚浮动:虽然前面的没有了,但是后面的不要占据人家的位置,仍然在自己的地方。
不允许其哪个方向有浮动。Clear:none/left/right/both
clear:both;保证不随浏览器大小改变,浮动元素相对位置改变。
常见博客,网页等布局。
#head {background:red;height:100px; }
#left {background:green;float:right;width:400px;height:300px;float:left;clear:left;}
#right {background:blue;width:200px;height:200px; clear:left;float:right;}
#foot {background:gold;height:200px; clear:left;height:50px;clear:both;}
#header {margin:0 auto;}默认铺满。设定宽度后,则居中。
如果让同一行的两个盒子居中,那么在外面加一个大盒子,一定要有宽度,否则默认全屏幕。
同一行的浮动同方向。
清除浮动的方法:主要对后面元素的影响。但是对父元素也会有影响。
当父元素没有指定高度是,它的子元素有浮动,其父元素的高度不会增加。
1. 额外标签法。在最底下加一个空盒子(没有内容)。
强迫容器能够容纳所有浮动元素。
2. Overflow:auto。根据子元素的需要增加宽度。Hidden:切除多余部分。Scroll显示滚动条。但是如果子元素出现定位,那就有问题了。
上述两种方法:等价表示:1.在大盒子最底下:
2.在大盒子定义中:overflow:hidden。
效果相同。
注意:想要使用绝对定位时,要有两个条件:
1. 必须给父元素加定位属性,position:relative。
2. 给子元素加绝对定位: position:absolute。
3. 利用伪对象,after。
html css盒子顶层,HTML学习之四CSS盒子相关推荐
- css 文字重叠_学习过CSS,那你知道BFC是什么吗?
虽然可能你没听过BFC是什么,但是你一定用过,其是一种在CSS中存在的技术,你可能只是一直不知道有这样一个专业名词,本文就来介绍一下到底什么是BFC. 一起来理解BFC的作用! 一.什么是BFC 首先 ...
- HTML学习之四CSS盒子
CSS盒子模型 Content, padding(内补丁), border; margin(外补丁); 计算宽度,左右内外边界,左右内外边框,内容,左右内外边距. 如果上下左右四个参数,顺序:上右下左 ...
- 【温故知新】CSS学习笔记(盒子边框介绍)
CSS盒子边框 CSS中其实就三个大模块:盒子模型.浮动.定位. 其中所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个装内容的容器,每个矩形都由元素的内容.内边距(padding ...
- CSS基础——盒子模型【学习笔记】
盒子模型(Box Model) 所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器. 盒子模型有元素的内容.边框(border).内边距(padding).和 ...
- CSS学习笔记7—盒子模型
盒子模型(CSS重点) 学习目标 理解: 能说出盒子模型有那四部分组成 能说出内边距的作用以及对盒子的影响 能说出padding设置不同数值个数分别代表的意思 能说出块级盒子居中对齐需要的2个条件 能 ...
- 阿ken的HTML、CSS的学习笔记_CSS盒子模型(笔记五)
走的越远你就越会发现 真正能在危难之时拉你一把的人 只有你自己 前段时间跟家里打视频电话 每每看到家人关怀的目光以及她们逐渐苍老的面庞 就不忍心再对他们言哭言累 有时午夜辗转反侧脑海里一想到他们 就会 ...
- web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
- 【温故知新】CSS学习笔记(盒子水平居中方法)
CSS盒子水平居中 比如有一个DIV盒子,如果不给任何样式,默认的宽度是和浏览器一样宽的(如下图所示). 那么若要让盒子里面的内容居中对齐,我们可以设定如下样式: div { text-align: ...
- 一、css清除浮动方法学习笔记总结(超详细,简单易懂)
** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co ...
最新文章
- three.js贴图
- 丁磊的10w+刷屏股东信里,隐藏了网易20年长青的三个秘密
- libcrypto yum 安装_YUM 安装 VSFTP出错
- 利用bladex+avue实现下拉数据源展示
- Redis 混合存储最佳实践指南
- 图片动画横条广告带上下滚动
- Python3.0 新特性
- 1000道Python题库系列分享26(12道Pandas编程题)
- idea springboot启动报SLF4J:Failed to load class “org.slf4j.impl.StaticLoggerBinder”
- IntelliJ IDEA 如何设置黑色主题,界面字体大小以及内容字体大小
- QQ查询信息接口php源码,免登录获取QQ用户信息API接口源码
- 放苹果问题(组合数学经典)
- 【千锋Python2205班9.26笔记-day06-列表(一阶段)】
- 进制转换应用场景_【Android】单位换算软件来袭,帮你解决生活中所有的进制换算问题,让你轻松秒变大神!...
- 子线程循环 10 次,接着主线程循环 100 次,接着又回到子线程循环10 次(线程面试:windows下实现)
- 贪心算法求解:王者荣耀购买点券最优策略
- 优秀的免费高清图片素材网站推荐
- CPD配准算法及代码的简单理解(Coherent Point Drift)
- ROG 魔霸新锐 2022 评测
- 非洲秃鹫优化算法:求解全局优化问题的一种新的自然启发元启发式算法(Matlab代码实现)