CSS(七) 盒模型
来源:互联网 发布:log4j2连接数据库 编辑:程序博客网 时间:2024/05/21 17:52
盒模型基本概念
拿相框来作比较的话
盒模型
相框边框- > border
画和相框边框的距离-> padding
相框之间的距离-> margin
边框
这个和前面的p标签的边框的设置方法是类似的,也是3种方式
border-width 边框宽度(粗细)
border-color 边框颜色
border-style 边框样式
#outerBox1{ border-width: 2px; border-color: red; border-style:solid; } #outerBox2{ border: thick blue dashed; } #outerBox3{ border-top: thick blue dashed; border-right: 2px red solid; border-bottom: thin yellow dotted; border-left: 2px red solid; }
内边距padding和外边距margin
padding和margin 的三种设置方式
用padding 设置内边距
用margin 设置外边距
#outerBox1{ border-width: 2px; border-color: red; border-style:solid; padding: 40px; margin: 10px; } #outerBox2{ border: thick blue dashed; padding-top: 20px; padding-right: 10px; padding-bottom: 5px; padding-left: 2px; margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 2px; } #outerBox3{ border-top: thick blue dashed; border-right: 2px red solid; border-bottom: thin yellow dotted; border-left: 2px red solid; padding: 20px 10px 5px 2px; margin: 20px 10px 5px 2px; }
网页布局与盒模型
块级元素VS 行内元素
块级元素:以一个块的形式展现,跟同级的兄弟块依次竖直排列,左右撑满,比如
<div>
<h1>
<p>
;
行内元素:以普通的一个DOM 节点展现,跟同级的兄弟元素横向排列,排满后,自动换行,比如<span>
;
标准文档流
指在不使用其他与排列和定位相关的特殊CSS 规则时,各种元素的排列规则;
盒子在标准流中的定位
1 行内元素之间的水平margin
marin-right + margin-left
<span style="margin-right: 10px;border: 1px red solid;">块1</span><span style="margin-left: 10px;border: 1px red solid;">块2</span>
2 块级元素之间的竖直margin
<div style="margin-bottom: 10px;border: 1px red solid;">块1</div><div style="margin-top: 0px;border: 1px red solid;">块2</div>
Margin-bottom margin-top 以大的为标准
3 嵌套盒子之间的margin
<div style="margin: 100px;border: 1px red solid;">块1<div style="margin-top: 20px;border: 1px red solid;">块2</div></div>
子块的margin 将以父块的内容为参考
4 margin 属性可以设置成负值
会在相应的向左移动
<span style="margin-right: 10px;border: 1px red solid;">块1</span><span style="margin-left: -20px;border: 1px green solid;">块2</span>
阅读全文
0 0
- CSS(七) 盒模型
- CSS学习笔记-盒模型(七)
- 【CSS笔记七】CSS布局模型
- 【CSS入门】七、理解盒子模型
- WEB入门.七 CSS布局模型
- CSS、CSS盒模型
- CSS盒模型
- 什么是css盒模型?
- CSS 盒模型
- CSS盒模型讲解
- CSS 盒模型
- CSS盒模型
- div+css盒模型
- css 盒模型
- css盒模型组成
- css盒模型组成
- css的盒模型
- 介绍CSS盒模型
- Netty Tls实现
- 使用android studio识别夜神模拟器
- python : pandas 读取csv 文件, matplotlib 画基金净值线
- 小知识点
- POJ 2456 Aggressive cows 笔记
- CSS(七) 盒模型
- 数据结构——栈与队列进制转换
- 第1章 JMX技术概览
- Http 协议
- webrtc视频捕获并通过QT显示
- C语言的数组名的特殊情况
- [DP] ZROI 2017 提高6 T2 异或统计
- MySql学习笔记(二)
- SSL P2755 密码