前端布局技巧与HTML/CSS复习-优快云博客

昨天看了启明星的月考核题，用这个作为复习的入口,随后看了以前写的东西，很多都忘记了，借这次复习捡起来。1>html的定义是超文本标记语言，2>对大小写不敏感，3>标题有六种4>id选择器和class选择器的区别是：id选择器在文档中只能用一次，而class选择器能使用多次；id选择器不能用词列表法为一个元素同时设置多个样式，而class选择器可以；在层叠样式表中，id以“#”开始，而class以“.”开始；5>.<img>的’ ALT’属性作用:图片在无法正确显示的时候起到文本替代的作用,解释此图片的内容；6>有序列表的标签名称:ol,无序列表的标签名称：ul;7>（1）display：none  不显示元素（2）display：inline 内联元素 前后没有换（3）display：block 块级元素 前后有换行符  （4）display：inline-block 内联块级元素 8>如果元素没有已定位的父元素，那么它的位置将相对于body （关于绝对定位与相对定位的问题，在文章的最后我粘贴了我觉得网上解释的比较好解释）9>将<img>的透明度设置为80%的css代码:opacity:0.8;
随后做了一下大题，感觉收获还是蛮多的，主要是水平垂直居中吧，我觉得position这个方法很实用。这里有我昨天尝试的各种方法的部分代码，其实这题重点也是方格居中，其次就是怎样设置两个角上的四分之一圆的问题（其中一个角的radious的值等于正方形的边长，其余值为0）
（1）负外边距方式（宽高固定）
（2）margin方式，宽高固定
（3）transform方式（宽高无限制）
（4）left/top/right/bottom均为25%

（1）
.container{
background-color:#ccc;
position:absolute;
height:200px;
width:400px;
left:50%;
top:50%;
margin:-100px 0 0 -200px;//为高宽的一半
}//这个方法需要提前知道元素的尺寸，否则margin的负值无法精确
（2）
.container{
background-color:#ccc;
position:absolute;
height:200px;
width:400px;
left:0;top:0;right:0;bottom:0;
margin:auto;
}
（3）
.container{
background-color:#ccc;
position:absolute;
height:200px;
width:400px;
left:50%;
top:50%;
transform:translate(-50%,-50%);//值表示相对于自身大小的偏移量
}
（4）
.container{
background-color:#ccc;
position:absolute;
height:200px;
width:400px;
left:25%;top::25%;right:25%;bottom::25%;
}
本来想把蜘蛛侠那个写一下的 时间原因还是看看自己以前写的 以及组内别人的作品再总结下容易忘记的那些小知识点吧，谁知道一个月不写后又忘了多少呢。
1.整个文档是在html下的head和body两个大部分，head一般有<meta charset="UTF-8">(设置编码格式）；<title></title>；<link rel="stylesheet" type="text/css" href="" /> 分别含义是：链接外部样式表，样式表及类型，样式的位置。
2.href和src的区别：href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。    <link href="reset.css" rel=”stylesheet“/>   浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理；src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。例如<script src="script.js"></script>当浏览器解析到该元素时，会暂停浏览器的渲染，知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
简而言之，src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。
3.清除链接的下划线text-decoration: none;
4.清除列表前面的点list-style-type: none;
5.边界border-radius: 8px;//圆角
6.点击t里的连接，li颜色发生变化.t a:hover li {
    background-color: #00b300;
}
7.background-size: cover;
9.这个针对列表以及链接，很实用
li {
    list-style-type: none;
    text-align: left;
}
 a{
    text-decoration: none;
    color: black;
}
10水平行内居中text-align：center   块级元素margin：0 auto； 垂直居中line-height可以设置字行高
11.图片布满全屏
body{
width：100%；
hight:auto;
background:url() no-repeat;
background-size:100%//宽设为100% 高居中 背景size100%
}
12.图片四要素：src,width,hight,alt(提示词）
13.边框 尺寸
border:1px solid red;
14.通配符选择器*{
//可以设置页面上所有标签的属性
}
15.这是一个以前写的常规的表样式，
<form action="
<select name="" style="border: 1px #E0E0E0 solid;background-color: #cccccc;">
    <option selected="">全部</option>//selected选择开始显示项
    <option>新闻</option>
    <option>产品</option>
</select>
    <input type="text" placeholder="请输入关键字" style="border: 1px #E0E0E0 solid;" />
    <button value="提交" type="submit">提交</button>
</form>
.leaderright1 select {
    width: 84px;
    height: 30px;
}

.leaderright1 input {
    width: 168px;
    height: 26px;
}

.leaderright1 button {
    border: 0;
    width: 60px;
    height: 30px;
    margin-top: 0;
    background-color: red;
}//对botton,input,select样式设置

position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。
position: relative;相对定位：相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置display:inline; display:block都是无效的；position:relative不会隐式改变display的类型。