婚纱摄影网站怎么建设,网站都有什么类型的,百度提交网址多久才会收录,四川电子商务网站CSSpart4--盒子模型 网页布局的三大核心#xff1a;盒子模型#xff0c;浮动#xff0c;定位网页布局的过程#xff08;本质#xff09;#xff1a;盒子模型的组成四部分#xff1a;边框#xff0c;内容#xff0c;内边距#xff0c;外边距 一 、盒子边框border:1.1 … CSSpart4--盒子模型 网页布局的三大核心盒子模型浮动定位网页布局的过程本质盒子模型的组成四部分边框内容内边距外边距 一 、盒子边框border:1.1 边框的复合写法简写1.2 边框拆分上下左右分开设置1.3 注意1合理利用层叠性能够节省代码量2表格中的细线边框3边框会形象盒子的实际大小 1.4、圆角边框常用的圆角边框形式 二 、盒子模型内边距padding盒子内边距padding会影响盒子实际的大小 三 、盒子模型外边距margin控制盒子与盒子之间的距离3.1 外边距让块级盒子水平居中3.2 清除网页元素内外边距 四 、psphotoshop基本操作疑惑 五、盒子阴影重要六 、文字阴影(了解) 模块目标
网页布局的三大核心盒子模型浮动定位
网页布局的过程本质
1 准备好相关的网页标签元素基本都是盒子
2 利用CSS样式设置盒子样式摆放到指定位置浮动和定位
3 盒子内存放内容
盒子模型的组成四部分边框内容内边距外边距
盒子模型
1 将html网页中的标签看作一个盒子用于存放内容
2 CSS盒子模型本质就是一个盒子封装html标签元素包含边框外边距内边距内容四部分
边框:border
内容contet
内边距padding控制盒子边框和内容之间距离
外边距margin控制盒子之间的距离
一 、盒子边框border:
边框颜色
边框宽度
边框样式
语法 border-style边框样式属性值
1solid----实线边框用的最多
2dashed----虚线边框
3dotted-----点线边框
1.1 边框的复合写法简写
语法没有顺序要求会自动识别一般按照 宽度 样式 颜色空格隔开
1.2 边框拆分上下左右分开设置
上边框border-top
下边框border-bottom
左边框border-left
有边框border-right
1.3 注意
1合理利用层叠性能够节省代码量
例子给200px*200px的盒子设置上边框为红色其余边框为蓝色
一般写法三个边框样式一样这样写有点鸡肋
/* border-top: solid 5px red; border-left: solid 5px blue; border-right: solid 5px blue; border-bottom: solid 5px blue; */合理利用样式的层叠性方法距离样式最近的上边框设置能够覆盖掉复合属性中设置的上边框的属性
border: solid 1px blue;包含了4条边
border-top: solid 1px red;层叠了上边框
2表格中的细线边框
table也是一个盒子
border-collapse属性控制相邻单元格的边框
语法 collapse意思是合并
border-collapse:表示相邻边框合并在一起边框的宽度不相加
3边框会形象盒子的实际大小
盒子实际的大小盒子本身大小边框的大小 解决方法
1 测量盒子大小的时候忽略变量只测量盒子本身
2 如果测量包含了边框需要宽度/高度减去边框的宽度
1.4、圆角边框
样式盒子边框变为圆角
border-radius属性
语法radius意思是半径 原理
常用的圆角边框形式
1 圆形
属性值先设置一个正方形盒子圆角边框半径值为正方形的一半
属性值设置为50%指半径值占整个边框宽度和高度的百分比
2圆角矩形
半径设置为高度的一半 细分为四个属性值顺时针顺序进行设置 也可以写两个数值左上和右下右上和左下 也可以是一个表示所有的角
二 、盒子模型内边距padding
表示的是内容和盒子之间的距离默认的是0px挨着
padding属性的复合写法四种 padding后面只跟一个属性值表示上下左右的内边距都是这个值 padding后面属性值有两个前面一个表示的是上下内边距后面一个表示左右内边距。 padding后面三个属性值:第一个表示上内边距中间第二个表示左右内边距第三个表示的下边距 padding后面四个属性值按照上右下左的顺序顺时针顺序 都得记。
盒子内边距padding会影响盒子实际的大小 加了内边框之后盒子的边长变为240px左边多20px右边多20px
需要使用padding盒子属性时候为了保证盒子本身的大小让盒子的width和height要减去多出的内边距
三 、盒子模型外边距margin控制盒子与盒子之间的距离
属性值 简写的形式
margin简写复写的形式和padding一样
3.1 外边距让块级盒子水平居中
需要满足的前提条件
1盒子指定了宽度width
2盒子的左右外边距设置为auto(与上下无关)
常见的写法
1 margin - left:auto; margin - right:auto;
2 margin:auto;
3 margin: 0 auto;
让行内元素/行内块元素水平居中对他们的父元素添加text-align:ccenter 3.2 清除网页元素内外边距
有些网页标签默认带有内外边距所有网页设置CSS样式前都要消去网页元素内外边距
li
(1使用通配符选择器全选清除网页元素内外边距 css
\* { margin: 0; padding: 0; }li { list-style:none;}注意
为了兼容性行内元素只设置左右内外边距不要设置上下边距设置了也不会起作用
块元素/行内块元素可以设置上下内外边距
四 、psphotoshop基本操作
实际工作中大部分切图工作在在ps中完成
1文件-打开打开文件选中所要测量的图片
2ctrlr:打开标尺
3右击标尺单位改为像素
4ctrl加号放大试图
5空格键小手图标可以拖动视图
6可以使用选区拖动测量图片大小
7ctrld取消选区/空白区点击 疑惑
1什么时候用什么标签
标签都是有语义的产品的标题使用标题标签h)大量文字就用p合理的地方放合适的标签
2 类名为什么要起这么多
起类名的优点每个标签都有名字比较好选择也便于后期维护
3 什么时候用margin什么时候用padding
用谁都行都可以解决问题看哪个更简单
4 自己做没有思路
布局有很多实现的方式可以模仿先分析再做出自己的风格
5学会使用一些辅助工具
ps等
五、盒子阴影重要
使用box-shadow属性
语法
属性值
1h-shadow:阴影水平位置必须
2v-shadow阴影垂直距离必须
3blur阴影的虚实
4spread阴影的大小
5color阴影颜色
注意影子不占用空间
六 、文字阴影(了解)
使用text-shadow属性进行设置
语法 属性值
