什么是微网站系统,网站设计流程,聊城做网站建设的公司,ps做网站显示内容参考一、CSS继承
1.文字相关的样式会被子元素继承。
2.布局样式相关的不会被子元素继承。#xff08;用inherit可以强行继承#xff09; 实现效果#xff1a; 二、盒子模型
每个标签都有一个盒子模型#xff0c;有内容区、内边距、边框、外边距。
从内到外#xff1a;cont…一、CSS继承
1.文字相关的样式会被子元素继承。
2.布局样式相关的不会被子元素继承。用inherit可以强行继承 实现效果 二、盒子模型
每个标签都有一个盒子模型有内容区、内边距、边框、外边距。
从内到外content-padding-border-margin。
注如果没有设置box-sizing属性一个盒子的最终大小为contentpaddingborder也是background-color的区域。 1.content标签的内容区域用来盛放别的标签或文本一般css设置的宽高就是这个区域。
2.padding内容到边框的距离一般设置完后由于padding占位会撑大盒子模型。
①单参数指定对应边内边距或者一次性指定所有内边距单位px %。
padding-left
padding-right
padding-top
padding-bottom
padding
②多参数参数个数按【上 - 右 - 下 - 左】顺时针顺序没有指定到的边则和对边相同。
padding上下 右左
padding上 右左 下
padding上 右 下 左
3.border边框样式
①单参数指定对应边框或一次性指定所有边框。
border-left
border-right
border-top
border-bottom
border-width
②多参数参数个数按【上 - 右 - 下 - 左】顺时针顺序没有指定到的边则和对边相同。
border-width上下 右左
border-width上 右左 下
border-width上 右 下 左
③快速写法 border1pxsolid #123456 4.margin外边距一般用来调整盒子之间的距离参数写法与作用同padding。
①单参数指定对应边框或一次项指定所有边框。
margin
margin-left
margin-right
margin-top
margin-bottom
②多参数参数个数按【上 - 右 - 下 - 左】顺时针顺序没有指定到的边则和对边相同。
margin上下 右左
margin上 右左 下
margin上 右 下 左
补充
1.背景颜色会填充到margin以内的区域
2.内容在content区域
3.box-sizing可以改变盒子模型的展示形态
content-box默认值——width、height作用于content
border-box——width、height作用于content padding border防止padding、border撑大盒子大小。 4.box-shadow可以设置盒子模型的周边阴影
参数x轴偏移量 y轴偏移量 阴影大小 阴影颜色 /* 一个偏右下的红色阴影 */ box-shadow: 10px 20px 10px red; 实现效果 三、float浮动
1.文档流文档中可显示对象在排列时所占用的位置。
块级元素单独一行自上而下div、h1、p
行内元素从左到右水平分布显示a、span、strong
2.float特点
①脱离文档流相对于父容器靠左或者靠右排列如果之前有浮动元素会挨着排列。
②如果区域出现img标签浮动元素的文本会绕开图片区域呈现一个【文字围绕图片】的效果
3.参数值
①none不浮动保持原文档流
②left脱离文档流居左浮动
③right脱离文档流居右浮动 实现效果 多种浮动效果 四、定位
分为relative、absolute、fixed。
属性值top距离顶部、bottom距离底部、left距离左边值、right距离右边值
top和bottom不同时用left和right不同时用 在开始布局之前使用*把所有标签的margin和padding设置为0取消屏幕间隔。 没有设置*时有间隔 1.相对定位relative以自身为参照点移动位置。 div classbox .box{ width: 100px; height: 100px; background-color: green; position: relative; left: 100px; top: 100px; 实现效果 2.绝对定位absolute以最近一个带有定位属性的父级元素为参照点来移动位置。
若父级元素没有定位属性就以body为参照点默认值为positionrelative。 div classbox div classbox1/div .box{ width: 100px; height: 100px; background-color: green; position: relative; left: 100px; top: 100px; } .box1{ width: 50px; height: 50px; background-color: red; position: absolute; top: 50px; left: 50px; } 实现效果 父级元素没有定位属性的实现效果 3.绝对固定定位fixed固定在网页的某一位置无论怎么滚动网页它都不会移动位置。 div classbox div classbox1/div /div div classplace/div .box1{ width: 50px; height: 50px; background-color: red; position: fixed; top: 50px; left: 50px; } .place{ width: 50px; height: 1000px; background-color: pink; } 实现效果 无论如何滚动鼠标向下滑动时红色的小方块始终固定在原来位置不会移动。
注意点
①元素移动后原来的位置不会空出来所以新元素不会占领原来的位置。 ②考虑absolute会出现脱离文档流的情况而relative不会。 效果图 absolute出现脱离文档流的情况 效果图 五、diaplay
1.值
①none隐藏该元素
②block将元素转为块级元素
③inline将元素转为行内元素
④inline-block将元素转为行内块元素可以指定宽高并且不换行。未指定宽高则根据内容撑开
2.去除元素间空白间隙
【inline-block】 【inline】元素之间会有空白间隙
1.在你的HTML代码里元素间不留任何空白。
2.父元素设置font-size0。
