css 的基础样式--border--padding--margin
border 边框
复合写法 border:border-width border-style border-color;
border-width 边框宽度
border-style 边框样式:solid实线 dashed虚线 dotted点线 (点线 IE6不认)
border-color 边框颜色:英文单词/十六进制/rgb
border-width还能再细分为
boder-top-width border-right-width
border-bottom-width border-left-width
当宽高为0px时,边框均等100px,会构成四个三角形拼成的正方形;
之上添加 border-radius:50%; 会构成四个三角形拼成的圆形;
transparent 透明
可以把颜色设置成透明
padding设置内边距(或者叫内填充)
padding-top
padding-right
padding-bottom
padding-left
padding复合写法:
一个值指定上右下左都是这个值
两个值指定上下、左右
三个值指定 上 左右 下
四个值指定 上 右 下 左
(四个值简记为顺时针的顺序)
div标签的占地面积宽高等于
(width+border+padding)x(height+border+padding)
边框border 内填充padding都是具有占地面积的
margin 外边距(分上右下左);
复合写法:与padding一样意思;
标签的嵌套:确定父子级关系,
1.第一个子级的margin-top会在特定的情况下穿透父级(穿透父级指的是它直接对父级生效,带着父级一起在上方形成边距);
规避方法:(1)给父级加边框;
(2)给父级加overflow:hidden;
(3)用父级的padding-top代替子级的margin-top;
2.兄弟关系的margin-top和margin-bottom会叠在一起导致重叠;
解决方式:兄弟之间的margin-top 和margin-bottom无法避免,只能将其中一个设置成两者之和来加以修正
css 的基础样式--border--padding--margin的更多相关文章
- 一、CSS的基础样式
CSS的基础样式 border 边框 复合写法 border:border-width border-style border-color: border-width:边框宽度 top right ...
- Uint 5.css继承权重,盒模型和border padding
一 .css的继承性和权重 1.1 继承性:继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. 可以被继承的属性有 ...
- Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容
1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...
- CSS盒子模型中的Padding属性
CSS padding 属性 CSS padding 属性定义元素边框与元素内容之间的空白区域,不可见.如果想调整盒子的大小可以调整内容区,内边距,边框. CSS padding 属性定义元素的内边距 ...
- 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)
W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...
- [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- css之display样式,padding,margin
1. 块级标签变成行内标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
随机推荐
- 真香的flex弹性布局
如何实现一个左中右的布局 在flex出现之前 #box{ color: white; } #left{ float: left; width: 30%; background-color: red; ...
- 【蓝桥】第八届C语言C组第7题 Excel地址(进制变形题,stack()简单使用)转载
标题: Excel地址 Excel单元格的地址表示很有趣,它使用字母来表示列号. 比如, A表示第1列, B表示第2列, Z表示第26列, AA表示第27列, AB表示第28列, BA表示第53列, ...
- 2018年第九届蓝桥杯【C++省赛B组】(未完)
第一题 标题:第几天 2000年的1月1日,是那一年的第1天. 那么,2000年的5月4日,是那一年的第几天? 注意:需要提交的是一个整数,不要填写任何多余内容 利用excel更加快捷: 答案是125 ...
- ubuntu---NVIDIA驱动 + CUDA 安装完可能会遇见的问题
如果稍不注意:系统内核.GCC.下载的版本不对应.安装过程中选项选择不正确,在NVIDIA驱动 + CUDA 安装完后可能会遇见一些问题. 一.登陆不进桌面 可能的操作: (1)nivida驱动安装完 ...
- PIP无法使用,script文件夹为空解决
[问题]环境变量已配置,但pip.pip3无法使用,且script文件夹为空解决: 一.安装pip3 python -m ensurepip 运行完之后就pip3有了: 二.安装pip python ...
- int类型和char类型的区别
下面三个定义式的区别: int i = 1; char i = 1; char i = '1'; int用来定义整型变量,char用来定义字符型变量,要清楚的知道三个定义式的区别,可以比较它们在内存中 ...
- HDU - 6006 Engineer Assignment (状压dfs)
题意:n个工作,m个人完成,每个工作有ci个阶段,一个人只能选择一种工作完成,可以不选,且只能完成该工作中与自身标号相同的工作阶段,问最多能完成几种工作. 分析: 1.如果一个工作中的某个工作阶段没有 ...
- 091-PHP数组过滤函数array_filter,过滤非整数
<?php function not_int($x){ //定义过滤非整数的函数 if(is_int($x)) return TRUE; } $arr=array(1,2,'a',3,4,'c' ...
- 实验吧-隐写术-九连环(steghide)
下载图片: 拿到kali里binwalk发现有压缩文件,然后foremost分解出来,将分出的压缩文件打开,发现已经被加密. 到这里就有几个思路了:1)暴力破解 2)伪加密 3)继续从图片中寻找信息 ...
- HDU 1003:Max Sum
Max Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...