html css再提高

html csst提高与js初接触

• iframe，为了学习flask，但是已经被弃用
• css的初始化，居中（文字，标签），显示隐藏，溢出，浮动，定位
• js基础：写法，查找，控制html

1.css初始化

h1、p、input有上下的margin,有的像div没有margin
所以在css第一行，我们要做的就是有些标签自带的默认样式，先初始化这些标签。

直接参考百度的初始化css
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin: 0;
padding: 0;
}
或者直接*{
margin: 0;
padding: 0;
}

vertical-align 控制上下对齐方式
resize 可以控制textarea的禁止拖动

还可以定义一些公共类封装在一起base.css

2.css文字居中 text-align

<style>
	div{
	
	}
</style>

text-align:left/right/center 水平的对齐
文字垂直居中：设置行高属性的值等于自身高度属性的值
line-height:盒子(标签)高度；
因为设置多少行高，文字刚好在行高中间

3.css标签居中，版心margin 0 auto

版心指的是网页有效内容(有内容)的范围，版心居中指的是有内容的范围居中
通过margin设置范围来实现，上下无所谓，左右要一致自动，所以是：

.w{
	width:xxx
	margin 0 auto;
}

4.css控制标签显示隐藏display

display属性
display:none;就隐藏了
display:block;就显示了 block就是霸占一整行
display:inline_block;可以把标签放入一行内显示

这里引入一个概念，定义这个属性就可以改变标签的占一整行，在一行内
块元素：block 默认霸占一整行
行内块元素：inline_block 有自己的宽高，不霸占一整行

而且钥匙隐藏了就不占位了，区分的有一个属性
visbility：hidden是占位的隐藏，这个不常用

5.溢出效果，处理溢出overflow

解决内容超出的问题
overflow:visible;默认是超出
overflow:hidden; 超出的部分隐藏
overflow:auto;超了加滚动不超不加滚动
overflow:scroll;没超也加滚动，水平也加滚动条

6.css浮动属性float

让换行的标签在一行显示
float默认是none不浮动
float:left;所有浮动标签左对齐
float:right;所有浮动标签右对齐

想要在一行显示，都得加浮动，想让谁先排，就先写谁

7.css权重

!important > 行内置css > id# > 类. >标签
!important 9999
行内 1000
id 100
class 10
标签 1

css权重的高选择器的会层叠掉权重小的选择器

8.css定位position!

定位的作用：两个标签压在一起就要用定位，position
有三种定位方式，相对定位relative，绝对定位absolute，固定定位fixed，默认值是不定位

文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

水平垂直居中的弹框

position配合偏移量(left/right/top/bottom)才有效果，实现这个标签压着另一个标签

相对定位：改变位置的参照为是他自己，占位脱离 标准流，还具备换行标签的特点!

position:relative;
left:100px;
top:100px;

绝对定位

position:bsdolute;
top:40px;

将块元素转为行内块元素
不占位，不具备换行标签，参照物默认是浏览器，改：以最近的一句定位的父级为参照物定位

固定定位

例如，搜索框不会跟着鼠标滚动滚走，没有
不占位，参照物是浏览器，不具备换行标签特点

定位的灵活运用

定位后后开着后来者巨商
内容和背景色一起半透明 opcaity：0~1;
background:alpha(0,0,0,0.6) 只透明背景色

定位居中显示：有定位有浮动不能用margin 0 auto;
left:50%
margin:-400px;自身宽度一半
top50%
margin-top:-150px;自身高度一半
z-index:10;改变自身层级

没学好，再总结

补充：通常是定位一些复杂不规则的定位，例如一个在父盒子左上，一个在右下，所以先相对获得参考坐标 position:relative 再借助绝对 position:absolute,再用top等调整距离参考的位置

9.页面的嵌套html>iframe

<iframe src="" frameborder="0" name="iframe_name"></iframe>
定义框架
<a href="" target="iframe_name"></a> 
这就跳转到框架里

再学习框架集

前端开发html流程：
创目录
切图，切为psd
建html，css
根据图片效果进行代码编写