常用的布局属性和圆角属性
常用的布局属性
盒模型
规定:网页中的每一个盒子都有四个组成部分
盒子的宽 = width +盒子外侧的距离 (margin)+盒子内部内容和边界的距离(padding) + 边框的距离(border)
margin属性
margin属性赋四个值时分别控制 上右下左(顺时针)
eg: margin:10px 20px 30px 40px
margin三个值时 上 (左右) 下
margin 两个值左值控制上下,右值控制左右
margin:0 auto;这里识别为水平居中,只能水平居中
第一个值代表上下外边距,第二个值代表左右外边距。不是每一个父盒子的高度都是确定的
margin:10px; 四个方向都是10px
padding属性
padding属性赋多值控制内间距的方式与margin类似
内边距(padding):是添加在盒子内部的距离,会撑大盒模型
解决: 1、所以需要增多少减多少有效width和height
2、设置新盒模型 box-sizing:border-box;(不用再减内边距)
提前设置
*{
/* 有些html标签生来带有边距,或者每个浏览器呈现出的状态不一样,为了统一浏览器的一致性,所以清除默认样式 */
/* 外边距 */
margin: 0;
/* 内边距 */
padding: 0;
/* 新盒模型 增加padding也不需要减少height*/
/* 提前设置每个盒子是不用内减的 */
box-sizing: border-box;
}
边框属性
border:边框的宽度 边框的线型 边框的颜色
border:2px solid red;
行高属性:
line-height:px/1.5
行高= 盒子的高度可以使单行 文字垂直居中
文本居中属性
text-align:centre居中/left左对齐/right右对齐
溢出隐藏属性
overflow:hidden
圆角属性
写法
border-radius: 10px 四个角弧度相同
border-radius:10px 20px ;10px 左上和右下 20px右上和左下
border-radius:10px 20px 30px; 10px 左上 20px 右上和左下 30px 右下
border-radius:10px 20px 40px 50px 顺时针
border-radius: 50% (要使正方形变圆赋值为50%或为正方形边长一半的像素)
weight:200px;
height:200px;
border-radius:100px;结果为绿线与红色边框交点以弧线连接起来(圆)
/* border-radius: 10px; */
/* border-radius: 20px/40px; */
/* 还可以这样表示 水平/垂直 左上右下(20px,30px) 右上左下(10px 50px) */
border-radius: 20px 10px/30px 50px;
上一篇: 119. Pascal‘s Triangle II
下一篇: Android 布局属性值