潍坊程序设计网站建设公司,涿州网站建设天峰,wordpress中文对照,一个网站备案两个域名吗目录
边框
内边距
基础写法
复合写法
外边距
基础写法
复合写法
块级元素的水平居中
弹性布局
设置行内元素的属性 #xff0c;span 每一个HTML元素就相当于是一个矩形的“盒子”
这个盒子由以下这几个部分构成#xff1a; 1.边框 border 2.内容 content 3.内边…目录
边框
内边距
基础写法
复合写法
外边距
基础写法
复合写法
块级元素的水平居中
弹性布局
设置行内元素的属性 span 每一个HTML元素就相当于是一个矩形的“盒子”
这个盒子由以下这几个部分构成 1.边框 border 2.内容 content 3.内边距 padding 4.外边距 margin
边框
基础属性 粗细border-width 样式border-stytle 默认没边框 solid实线边框 dashed虚线边框 dotted点线边框 颜色border-color style div{ width: 200px; height: 100px; //以下三行也可以写成 border:blue solid 10px; 这三个参数不区分先后顺序 border-color: blue; border-style: solid; border-width: 10px; } /style div/div 效果如下 但是可以看出我们的边框撑大了这个盒子为了避免这种情况我们使用 box-sizing:border-box 内边距
padding 设置内容和边框之间的距离。
基础写法 padding-top padding-bottom padding-left padding-right 复合写法 padding5px //表示四个方向都是5px padding5px 10px //表示上下内边距5px 左右内边距10px padding5px 10px 20px//表示上边距5px 左右内边距为10px 下内边距20px padding5px 10px 20px 30px//表示 上5px 右10px 下20px 左30px 顺时针 外边距
控制盒子和盒子之间的距离。
基础写法 margin-top margin-bottom margin-left margin-right 复合写法 //规则同padding margin5px //表示四个方向都是5px margin5px 10px //表示上下5px 左右10px margin5px 10px 20px//表示上5px 左右10px 下20px margin5px 10px 20px 30px//表示 上5px 右10px 下20px 左30px 顺时针 块级元素的水平居中 //以下三种写法都可以 margin-left:auto; margin-right:auto; margin:auto; margin:0 auto; 弹性布局
设置行内元素的属性 span div span1/span span2/span span3/span /div style div{ width: 700px; height: 700px; background-color: blue; } div span{ height: 100px; width: 100px; background-color: yellow; } /style 当我们设置span属性时因为span是行内元素所以对他的设置并没有生效如下图我们需要在span的父级标签中也就是div设置displayflex; 使其进入弹性布局模式 //添加displayflex div span1/span span2/span span3/span /div style div{ width: 700px; height: 700px; background-color: blue; display: flex; } div span{ height: 100px; width: 100px; background-color: yellow; } /style 常用属性 justify-content //设置主轴上的子元素排列方式 水平方向 默认是start 效果如下 当值为center 取值为end 取值为space-between意味着行方向上元素均匀布局 align-items //设置侧轴上的元素排列方式 垂直方向 取值与justify-content一致
