前端html,css基础总结

0.一、css引入界面的方式:

内联式:经过标签的style属性，在标签上直接写样式。

<div style="width:100px; height:100px; background:red "></div>

嵌入式:经过style标签，在网页上建立嵌入的样式表。

<style type="text/css">

div{ width:100px; height:100px; background:red }

</style>

外链式:经过link标签，连接外部样式文件到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

0.二、css选择器:

标签选择器

类选择器

层级选择器

 

0.三、 属性(经常使用):

布局经常使用:

width,height,background,border,solid(实线),padding,

margin,float,opacity:0.3(元素透明度),z-index:1(表示层叠,值越大越上面)

 

文本经常使用样式属性;

color,font-size ,font-family ,font-weight ,line-height,

text-decoration(去下划线),text-align(文字对齐方式),text-indent(文字首行缩进)

0.四、元素溢出:

overflow:visible(默认值)不会被修剪

hidden:被修剪,其他内容不可见

scroll:被修剪,可是浏览器会有一个滚动条看其他内容

auto:若是被修剪就会有滚动条

 

0.五、分栏:

<p>这一段文字用来测试分栏。这一段文字用来测试分栏。这一段文字用来测试分栏。</p>

 

p {

width: 200px; /* 把段落的宽度设短一点，便于效果的展示 */

column-count: 3; /* 设定须要分几栏 */

column-gap: 20px; /* 设定两栏间隔 */

}

1.一、盒模型:

包括:内容(content),填充(padding),边框(border),边距(margin).

咱们给元素设置的高度,是内容(content)的高度,再给元素添加填充(padding),

这样的话会让本来的元素看起来更高,由于会撑起

1.二、无语义:没有任何样式的元素(就是没有行高,间距,颜色之类的东西),好比div

1.2 以边框为界的盒模型:

<box-sizing:border-box></box-sizing:border-box>

有些时候,咱们不但愿给元素填充(padding)时,元素高度改变,不利于咱们布局,就能够

使用上面的方法,在IE的怪异模式下,使用了这种模式

...

<div class="box-model">box-model</div>

...

<typle>

.box-model {

box-sizing: border-box; /* 设置成以边框为界的盒模型 */

border: 1px solid red;

height: 80px;

padding: 10px;

}

</typle>

 

1.三、行内元素(inline),块元素(block)

布局通常都用块元素:

1.3.1 块元素能够设置宽高,默认占据一行,行内元素不能设置宽高,宽度由其内容决定

1.3.2 块元素默认没有高度,有内容才会有高度.

行内元素默认没高度和宽度,有内容才会有,行内元素虽然不能设置宽高,可是设置

成绝对定位(absolute)后,能够设置宽高.

1.3.3 块元素:

<div></div>

<p></p>

<ul></ul>

<li></li>

<table></table>

<form></form>

<header></header>

<section>

<option></option>

</section>

<footer></footer>

<dl></dl>

<dd></dd>

 

行内元素:

<a href=""></a>

<font></font>

<em></em>

<strong></strong>

<i></i>

<img src="" alt="">

<span></span>

空元素:

<br>

<hr>

<img>

<input type="text">

<link rel="stylesheet" href="">

<meta>

 

1.3.4 一行只有一个块元素,可是行内元素能够有不少个,空的元素将在布局的时候消失

 

 

1.3.5 行内块元素:

inline-block

三个li并列，都设置成inline-block。当对最左边的元素设置display:none;时，

其余两个li会下沉到容器的底部。此时，须要对这两个li设置顶部对齐（vertical-align:top;）

<ul class="nav" id="nav">

<li class="left"><div class="hidden">首页</div></li>

<li class="center"><div>文章</div></li>

<li class="right"><div>留言</div></li>

</ul>

 

.hidden {display: none;}

.left {height: 50px;}

.center,.right {vertical-align: top;}

 

1.3.6 隐藏元素:

visibility:hidden;

display:none; //隐藏元素而且会清除本来占用的布局空间

 

 

1.四、位置(position):

1.4.1 绝对(absolute),相对(relative),固定(fixed)

移动:left,right,top,bottom

清除布局空间的定位(absolute fixed)

1.4.2 固定定位（fixed）不会随着鼠标的滚动而改变位置。

他真的是固定屏幕的某一个位置的，比较常见的是网页右下角的广告

 

绝对定位（absolute）的定位原点是非默认定位（static）的父节点。

能够是absolute fixed relative，若是父节点没有这些，那定位原点就是body了。

使用了这两种定位中的一种，元素本来占用的布局空间将会消失（脱离文档流)

 

 

1.4.5 相对定位(relative):

相对原有位置定位。

使用这种方法，元素本来占用的布局会保留。

父级采用relative，子代采用absolute。则子代的定位原点变为父级元素的左上角

默认定位:static

浮动(float):

居中一个浮动元素:

Width:500px ; height:300px;//高度能够不设

Margin: -150px 0 0 -250px;

居中一个普通元素:

margin:0 auto;

清除浮动(overflow:hidden;):

使用这种方法意味着，浮动元素得有一个父元素，并给父元素添加overflow:hidden;属性。

.nav {

overflow: hidden;

}

 

清除浮动(.clear):

这种方法须要在浮动元素后面添加一个空的节点，而后写上clear属性。兼容IE6须要添加zoom:1;。

<div class="clear"></div> <!--用来清楚浮动的空元素-->

css选择符有哪些:

id选择器（ # myid）

类选择器（.myclassname）

标签选择器（div, h1, p）

相邻选择器（h1 + p）

子选择器（ul < li）

后代选择器（li a）

通配符选择器（ * ）

属性选择器（a[rel = “external”]）

伪类选择器（a: hover, li: nth - child）

 

1.五、 display的值

block 象块类型元素同样显示。

none 缺省值。向行内元素类型同样显示。

inline-block 象行内元素同样显示，但其内容象块类型元素同样显示。

list-item 象块类型元素同样显示，并添加样式列表标记。

1.六、 权重:

标签:权重为:1

类选择器:权重为:10

id选择器:权重为100

权重能够相加的:如#id div的权重就是101

内嵌在标签里面的style属性的权重为1000

权重相同时,最后定义的样式会起做用,通常都要尽可能避免这样的状况

1.七、 优雅降级:

web站点在全部新式浏览器中都能正常工做,若是是老式浏览器,就会检查是否能正常工做,

若是不能支持功能就为那些浏览器增长候选方案,使之在旧式浏览器上能以某种形式降级体验

,可是却不至于彻底失效.

渐进加强:

从被全部浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,

向页面增长无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥做用。