CSS【常用CSS样式、盒子模型、定位、浮动、扩展样式】--学习JavaEE的day46

day46

CSS

练习

页面实现：
表单练习
分析：

未优化：

优化：

参考代码：（包含样式优化–选择器+CSS属性）

先写上table方便实现，之后再去除即可
name没有服务器，可暂时不写

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.right{text-align: right;}span{font-size: 11px;color: gray;}#sub{background-color: green;color: white;border: green;border-radius: 3px;}/* 设置垂直居中，也叠加效果*/.xxx{display: flex; /* 设置弹性盒*/justify-content: center flex-start;}</style></head><body><form action="#" method="post"><table width="600px"><tr><td class="right"><span>邮件地址</span></td><td><input type="text" placeholder="建议使用手机号注册" />@<select><option>163</option><option>QQ</option><option>sina</option></select></td></tr><tr><td></td><td><span>6~18字符，可使用字母、数字、下划线，需以字母开头</span></td></tr><tr><td class="right"><span>密码</span></td><td><input type="password" /></td></tr><tr><td></td><td><span>6~16个字符，区分大小写</span></td></tr><tr><td class="right"><span>确认密码</span></td><td><input type="password" /></td></tr><tr><td></td><td><span>再次确认密码</span></td></tr><tr><td class="right"><span>手机号</span></td><td><input type="text" /></td></tr><tr><td></td><td><span>忘记密码时，可以通过该手机号码快速找回密码</span></td></tr><tr><td class="right"><span>验证码</span></td><td class="xxx"><input type="text" /><img src="https://www.xiaoyuxitong.com/uploads/allimg/180816/214SMU3-0.png" width="100px" height="20px" /><a href="#">看不清楚？换张图片</a></td></tr><tr><td></td><td><span>请填写图片中的字符，不区分大小写</span></td></tr><tr><td></td><td><button>免费获取验证码</button></td></tr><tr><td class="right"><span>短信验证码</span></td><td><input type="text" /></td></tr><tr><td></td><td><span>请查收手机短信，并填写短信中的验证码</span></td></tr><tr><td></td><td><input type="checkbox" checked="checked" /><span>同意<a href="#">"服务条款"</a>和<a href="#">"隐私权相关政策"</a></span></td></tr><tr><td></td><td><input id="sub" type="submit" value="立即注册" /></td></tr></table></form></body>
</html>

常用CSS样式

常用CSS属性

1.字体属性

属性名称

font-family(字体)

font-size（大小）

font-style（风格）

---- normal标准样式

---- italic斜体

---- oblique倾斜

---- inherit从父类继承的字体样式

font-weight(字体加粗)

----normal标准样式

----bold粗体

----bolder更粗

----lighter更细

2.文本属性

属性名称

letter-spacing(字母间隔)

text-decoration（划线修饰）

text-align（文本对齐方式）

text-indent(文本缩进)

line-height（行高）

3.背景

属性名称

background-color

background-image

background-repeat(平铺方式)

4.边框

属性名称

border-bottom

solid(实线)

dashed(虚线)

double(双实线）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{/*设置字体样式-------------------------------------------*/font-family: "微软雅黑";/*设置字体*/font-size: 50px;/*设置字体大小*/font-style: italic;/*设置字体样式 - 倾斜*/font-weight: bold;/*设置字体粗细*//*设置文本样式-------------------------------------------*/letter-spacing: 20px;/*设置文本间隔*/text-decoration: underline;/*设置文本划线 - 下划线*/text-align: center;/*设置文本对齐方式 -- 居中*/color: white;/*设置文本颜色*//*设置背景样式 --------------------------------------------*/background-color: red;/*设置背景颜色*/}a{text-decoration: none;/*设置字体划线 - 去除划线*/}div{width: 500px;height: 500px;background-image: url(../img/波多野结衣.jpg);/*设置背景图片*/background-repeat: repeat-y;/*设置平铺方式：沿y轴平铺*/border: orange 1px solid;/*设置边框 - 颜色,粗细,实线*/}</style></head><body><p>学无止境</p><a href="#">百度一下</a><br /><div></div></body>
</html>

运行：
在这里插入图片描述

盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。
盒子模型：用于页面分区

浏览器兼容性
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
为了兼容IE老版本，一句话，能用外边距就用外边距

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;/** 	margin-top: 50px;设置外边距 - 上边距margin-left: 50px;设置外边距 - 左边距margin-right: 50px;;设置外边距 - 右边距margin-bottom: 50px;;设置外边距 - 下边距*/margin: 50px;}			</style></head><body><div>学无止境</div></body>
</html>
样式2：内边距<style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;/** 注意：能不使用内边距就不使用，因为老版本的IE浏览器不支持，而且会把盒子撑变形* * 	padding-top: 50px;padding-left: 50px;padding-right: 50px;padding-bottom: 50px; */padding: 50px;/*设置内边框：上下左右都是*/}			</style>
样式3：水平居中，垂直居中需要用到定位<style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;margin: 0 auto;/*水平居中*/}			</style>

运行：
盒子模型运行

定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

相对定位

相对定位：相对于原有的位置发生改变，并且保留原有的空间位置。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;margin-top: 200px;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;position: relative;/*相对定位：保留原有位置，相对于原有位置进行位移*/top: 50px;/*距离定位位置上边缘50px*/left: 50px;/*距离定位位置左边缘50px*/}#box03{width: 100px;height: 100px;border: blue 1px solid;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>

运行：
相对定位

绝对定位

注意：不能简单认为是根据body标签位移

绝对定位相对于他有position属性的父级元素进行定位，如果父级元素没有postion定位，那么就找父级的父级，直到向上找到position定位为止，如果他向上找不到position定位，那么就以最外层的body进行定位。

并且绝对定位不会保留原有的位置空间。

z-index属性，确定层级大小，用来设定哪一个盒子在上面，越大越在上面

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;margin-top: 200px;position: relative;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;position: absolute;/*绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移*/top: 50px;/*距离定位位置上边缘50px*/left: 50px;/*距离定位位置左边缘50px*/}#box03{width: 100px;height: 100px;border: blue 1px solid;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>

运行：
绝对定位

固定定位

根据前面的锚链接改进，加一个置顶功能

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{position: fixed;/*固定定位：将元素固定到页面的某个位置*/top: 80%;left: 90%;}</style></head><body><div><a href="#top">置顶</a></div><a name="top"></a><!--下锚点--><a href="#new01">法治</a><!--定位到锚点处--><a href="#new02">国际</a><!--定位到锚点处--><a href="#new03">娱乐</a><!--定位到锚点处--><a name="new01"></a><!--下锚点--><h1>法治新闻 - 为何半夜母猪频频惨叫</h1><h1>法治新闻 - 为何八旬老太以外怀孕</h1><h1>法治新闻 - 是人性的溟灭</h1><h1>法治新闻 - 是道德的沦丧</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><a name="new02"></a><!--下锚点--><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><a name="new03"></a><!--下锚点--><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1></body>
</html>

运行：
固定定位

浮动

浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子可以横向排列起来。

副作用：因为浮动会使元素脱离了标准的文档流，从而导致父级元素无法被撑开。

解决办法：添加空盒子

在被浮动的元素后面，添加一个空的div，并且设置一个clear类，并付给该div.clear{clear:both;}

普通流【包含的普通流变成浮动流就管不住，利用清除浮动效果就能解决】

浮动1

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 100px;height: 100px;border: red 1px solid;float: left;}#box02{width: 100px;height: 100px;border: green 1px solid;float: left;}.clear{clear: both;/*清除浮动效果*/}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>

运行：形象概述：最初【一个大div包含两个小div】–>再是【将里面的两个小div设置浮动，大div管不住小div】–>最后【在里面加一个小div用于去除同级别的浮动效果，大div又能管住小div】

浮动2

浮动成左右两边

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 100px;height: 100px;border: red 1px solid;float: left;}#box02{width: 100px;height: 100px;border: green 1px solid;float: right;}.clear{clear: both;/*清除浮动效果*/}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>

运行：
浮动2

浮动3

浮动成左右两半

如何查看：两种方式

设置背景颜色：background-color:
查看元素在浏览器检查代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 50%;height: 100px;float: left;}#box02{width: 50%;height: 100px;float: right;}.clear{clear: both;/*清除浮动效果*/}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>

运行：注意这里是去除了box01、box02的边框，不然会出现换行
浮动3有边框
浮动3

扩展样式

渐变色找到图片最下方的一个色点【末尾加上】会自动填充

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF;}input{width: 100px;height: 50px;color: white;font-weight: bolder;background-color: orange;border-radius: 5px;/*圆角属性*/box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/}img{border-radius: 50%;}</style></head><body><input type="button" value="普通按钮" /><br /><img src="../img/波多野结衣.jpg" width="100px" height="100px" /></body>
</html>