宽(width)高(height)度设置：
1、 行内元素与块元素的区别
宽高度设置对于有些行内元素无效；图片、表格有效；网页中使用的图片比较多，建议控制图片宽高度，以便控制显示内容大小（图片会缩放，最好按等比例来设置，否则会变形）。
2、 指定像素与百分比
一般情况下行内样式需要设置宽度的单位，比如说像素px（pixel）；设置宽度为百分比可以固定宽度，比如块元素DIV，宽度不设置为100%，高度为0px(或内容的高度)，以单位值固定的宽高度的标签内容超出不会在容器内显示。
背景（background）：
背景色Background-color
背景图片 background-image:url(图片路径); 默认会水平、垂直方向重复
Url：统一资源定位符，就是资源的地址。
注意外链样式尽量不要使用图片背景，非要使用可以使用服务器根目录定位。
背景重复 background-repeat: no-repeat repeat-x repeat-y
背景吸附 background-attachment:scroll (默认，随对象滚动) fixed（固定）
<body style="background-image:url('1.jpg'); background-repeat:no-repeat;
background-attachment:fixed; height:1500px;">
asfasdfasdfsadfdsfa
</body>
背景定位 background-position:top center bottom left right x y（用于一张图片背景定位，容器不动背景图像移动！！！），例如一张图片背景定位
<div style="width:100px; height:100px; background-image:url(1.jpg); background-repeat:no-repeat; border:1px solid black; background-position:-201px -236px;"></div>
background-size:cover 可以让背景图片拉伸，但是要求IE8以上版本！！！
盒子模型：
布局一般顺序：
1、关注内容，放内容；
2、控制内容与边框距离，Padding，内边距；
Padding（内边距，内容距离标签边框的距离，该元素的宽度=内容宽度+padding）:10px; 代表 上、右、下、左 （顺时针）内容与边框的距离都是10PX；还可以控制内边距的上下、左右距离：50px 100px;可以这样书写完全控制 padding:10px 20px 30px 40px;
- border：外边框。可以单独写border-bottom:1px solid black; 也可以简写border:1px solid black;
4、Margin：外边距。边框距离容器的距离。Margin:10px; 类似于padding上、右、下、左，外间距,但是只有顶部、左侧有效。Margin:10px 20px 30px 40px;
margin-left:100px; margin-top:100px;
针对于表格：
cellpadding为单元格内容距离单元格边框的边距；cellspacing单元格与单元格之间的边距。
边框圆角： border-radius:50px;
<img src="anniu.jpg" width="200px" height="100px" style="cursor:pointer; border-radius:10px;" onclick="alert('haha');" />
对齐(align)
1、 容器对齐：
该标签相对于容器对齐，该标签加上align属性（块元素无效）；
2、 内容对齐（左、右、居中、两端）
该标签的内容样式 style=”text-align:center;”
作业：
利用以上知识，使用table布局以下效果
提示：
背景色： #6c6c6c
文本框提示： placeholder=”提示信息”
边框阴影： box-shadow:inset 0 0 10px gray;
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/3000.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
