html一些基础使用

OK!接下来我们分别说这些元素的意义。首先,什么是块级元素?

在html中   

 <div>,<p>,<h1>,<form>,<ul>,<li>

就是块级元素。(ul标签和li标签还记得是什么意思吧?)设置 display:block 就是将元素显示为块级元素。如:

a{
 display:block;
}


这里就是将内联元素a转换为块状元素,从而使a元素具有块状元素的特点。那么它有哪些特点呢?1.每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真特么的霸道,一个块级元素独占一行)2.元素的高度、宽度、行高以及顶和底边距都可设置。3.元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。如需验证的话,最好是设置底色,这样比较好显现效果。然后是内联元素。

在html中,

<span>,<a>,<label>,<strong>,<em>

就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码 display:inline 将元素设置为内联元素。如:

<style>
 div{
  dispaly:inline;
 }
</style>
<div>我已经变成内联元素</div>


这里就是将块状元素div转换为内联元素,从而使div元素具有内联元素特点。内联元素的特点又有哪些呢?如下:1.和其他元素都在一行上;2.元素的高度、宽度及顶部和底部边距不可设置;3.元素的宽度就是它包含的文字或图片的宽度,不可改变。这里要注意一个点,就是内联元素之间有一个间距问题。感兴趣可以试验一下。

内联块状元素就是同事具备内联元素,块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素<img>,<input>标签就是这种内联块状标签。

inline-block元素特点:

1.和其他元素都在一行上 

2.元素的高度、宽度、行高以及顶和底边距离都可设置。然后劲爆的来了。我们来说说盒子模型。那么到底是什么呢?

谢特,我实在不好打字。给你们段视频

这段视频是前奏,我们常用的<div>,<ul>,<ol>,<p>,<h>,<table>标签等等这些块级标签都具备盒子模型的特征。记住几个关键词,有:填充物padding margin border而且有四个方向。具体可以百度一下。盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细,样式和颜色(边框三属性)注意:1.border-style(边框样式)常见样式有:dashed(虚线)dotted(点线)solid(实线)然后我插一句话,千万不要写错字母。

2.border-color(边框颜色)中的颜色可设置为十六进制颜色,如:border-color:#888;前面的井号千万不要忘记!!!3.border-width(边框宽度)中的宽度也可以设置为:thin|medium|thick(但是不是很常用),最常用的还是px。这里的三个属性我查询了一下分别的意思是:定义细的边框|默认。定义中等的边框|定义粗的边框当然,还有两个属性,分别是length和inherit,length是允许您自定义边框的宽度inherit是规定应该从父元素继承边框宽度。但是最好还是用px,方便我们啊~~~
现在有一个问题,如果有想为p标签单独设置下边框,而其他三遍都不设置边框样式怎么办呢?css样式中允许只为一个方向的边框设置样式:

div{border-bottom:1px solid red;}


同样也可以其他三边:上面是:

div{border-top:1px solid red;}


右边是:

div{border-right:1px solid red;}


左边是:

div{border-left:1px solid red;}


盒子模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以内的内容范围。因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界元素的高度也是同理
比如:

<style>
    div{   width:200px;   padding:20px;   border:1px solid red;   margin:10px;}
</style>
<body>
   <div>文本内容</div>
</body>

元素的实际长度为:10px+1px+20px+200px+20px+1px+10px=262px。注意:li是块状元素,块状元素有一个特点:在不设置宽度的情况下,是父容器的100%。

元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可以分上下左右如:

div{padding:20px 10px 15px 30px}


这里顺序一定不要搞混了。分开写如下:

div{
  padding-top:20px;
  padding-right:10px;
  padding-bottom:15px;
  padding-left:30px;
}

如果一周为都一样的话就直接了当残暴一点:

div{padding:10px}


如果上下一样,左右一样的话更简单了:

div{padding:10px 20px;}


注意!!!:padding不是文字到边框的距离!是内容到边框的距离,内容的大小是由width和hight决定的。如果文字过多,会限定width往下写,盒子大小不变,文字超出。元素与其他元素之间的距离可以使用边界(margin)来设置。边界也可以分为上、右、下、左。(这里注意了。我上一段没有写注意主要是为了这里来写。因为两者是一样的!都是上右下左!这叫啥,顺时针,对不对?)代码跟上面的那段差不多:

div{margin:20px 10px 15px 30px;}


分开写也是:

div{
  margin-top:20px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:30px;
}

如果上右下左的边界都为10px,可以这么写:

div{margin:10px;}


如果是上下边界一样为10px,左右是一样为20px,可以写成:

div{margin:10px 20px;}


总结一下padding和margin的区别,padding在边框里,margin在边框外。另外就是一个叫拍腚,一个叫妈个鹰。记住拍腚是拍里面的,老鹰是在外面的。妈个鹰抓不到它,拍腚,能拍得到。
清楚了css盒模型的基本概念,盒模型类型,我们可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是css最基本、最核心的概念。但布局模型在盒模型基础之上,又不同于我们常说的css布局样式或css布局模板。如果说布局模型是本,那么css布局模板就是末了,是外在的表现形式。css包含3种基本的布局模型,用英文概括为:Flow、Layer和Float
在网页中,元素有三种布局模型:
1.流动模型(Flow) 

2.浮动模型(Float)

3.层模型(Layer)
先来说说第一个,流动模型。流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的html网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征:第一点,块状元素都会在所处的包含元素
内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%实际上块状元素都会以行的形式占据位置。第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示(内联元素不像块状元素那么霸道独占一行)块状元素总是那么霸道多少独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?那么元素浮动就可以出来实现这个构想了。任何元素在默认值情况下是不能浮动的,但是可以用css定义为浮动,如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。

div{
  width:200px;
  height:200px;
  border:2px red solid;
  float:left;
}
<div id="div1"></div>
<div id="div2"></div>
当然也可以同时设置两个元素右浮动也可以实现一行显示:
div{
  width:200px;
  height:200px;
  border:2px red solid;
  float:right;
}
<div id="div1"></div>
<div id="div2"></div>
(突然蹦跶出来一个问题,solid是什么意思?不记得的可以往回看看知识点,是
实线。还有虚线(dashed)还有点线(dotted)不记得的一定要往回看!一定随时看)
那么又出现一个问题了,我想回答你们。。爱过。。不对。。。出现的问题是这样
的:如果要设置两个元素一左一右呢???当然可以哒~我也萌萌哒~代码如下:

<style>
    div{
      width:200px;
      height:200px;
      border:2px red solid;
    }
    #div1{float:left;}
    #div2{float:right}
</style>

<div id="div1"></div>
<div id="div2"></div>


那么出现最后一个了,也是大boss,什么是层布局模型?层布局模型就像是图像软件,也是最牛的图(毁)像(图)软(秀)件(秀)PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但是在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来说说html中的层布局。如何让html元素在网页中精确定位,就像图像软件Photoshop中的图层一样可以对每个图层能够精确定位操作,css定义了一组定位(positioning)属性来支持层布局模型。
层布局模型有三种形式:

1.绝对定位(position:absolute)

2.相对定位(position:relative)

3.固定定位(position:fixed)


然后我来分别介绍着三种形式。

第一种绝对定位:如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这一的包含块,则相对于body元素,即相当对于浏览器窗口。

现在来说相对定位:如果想为元素设置层模型中的相对定位,需要设置position:relaive(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中便宜位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。那么,什么叫“偏移前的位置保留不动呢?”就是div元素相对于以前的位置产生偏移,但是div元素以前的位置还保留着,所以在div元素里面的标签内的东西是不会偏离的。说简单点就是原来div里面比如有一段文字,文字是不会动的,只是动div。
第三种是固定定位:fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。这个官方意思说的太复杂,要我说就是你们看的某些网站上面有一些什么普京啦等等赌博类型广告在左右侧,你还无法关闭的那种东西。明白了嘛?/斜眼笑学了绝对定义的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,有没有想过可不可以相对于其他元素进行定位呢?答案是肯定的。但是使用position:relative来帮忙,但是必须要遵循几个规范:
1、参照定位的元素必须是相对定位元素的前辈元素:
<div id="box1"><!--参照定位的元素-->
   <div id="box2">相对参照元素进行定位</div><!==相对定位元素-->
</div>
从上面可以看出box1是box2的父元素(父元素当然是前辈元素了)
2、参照定位的元素必须加入position:relative;
#box1{
  width:200px;
  height:200px;
  position:relative;
}
3、定位元素加入position:absolute,便可以使用top、bottom、left、right进行
偏移定位了。
#box2{
  position:absolute;
  top:20px;
  left:30px;
}
这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了而可以自由设置了。)这里一定要记住前后呼应,子元素要参照父元素的标准,所以父元素是参照物,一定要加position:relative;子元素中要加position:absolute;然后容易错的地方就是写html的时候,没有把子元素放在父元素中去,那么就不能称之为父元素和子元素了。然后我们来接着上面的说一下简写,这样做有个好处,就是缩减带宽,减少资源占用。盒子模型中记得是什么样的吗?上(top)右(right)下(bottom)左(left)如:margin:10px 15px 12px 14px;/*上设置为10px 右设置为15px 下设置为12px 左设置为14px*/
通常有下面三种缩写方法:
1、如果top、right、bottom、left值相同,如:margin:10px 10px 10px 10px;可以缩写为:margin:10px;
2、如果top和bottom相同,right和left相同,如:margin:10px 20px 10px 20px;可以缩写为:10px 20px;
3、如果left和right相同,如:margin:10px 20px 30px 20px;可以缩写为:margin:10px 20px 30px;
注意:padding、border的缩写方法和margin是一致的。
再注意一点啊:padding(拍腚)的意思是里面的内容到边框的距离又称之为填充物!margin(妈个鹰)是在外面的!是包含整个的!border(包的)就是边框!包起来的!
然后说颜色值缩写。这个嘛。。。找w3cschool慢慢查。。。我这个真不好写。
接着说字体缩写,网页中的字体css样式代码也有他自己的缩写方式,具体百度。然后说长度值,这里要总结一下,常用到的px(像素)、em、%百分比,要注意其实这三中单位都是相对单位。
1、像素
像素为什么是相对单位呢?因为像素指的是显示器上的小点(css规范中假设"90px=1英寸")实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位
2、em
就是本元素给定字体的font-size值,如果元素的font-size为14px,那么1em=14px;如果font-size为18px,那么1em=18px。如下:
p{font-size=12px;text-indent:2em;}

这行代码就是可以实现段落首行缩进24px(也就是两个字体大小的距离)

注意一个情况:当font-size设置单位为em时,此时计算的标准以p的父元素的font-size为基础。如:


<p>以这个<span>例子</span>为例。</p>

<style>

p{font-size:14px}
span{font-size:0.8em;}

</style>

结果span中的字体“例子”字体大小就为11.2px(14*0.8=11.2px)
3、百分比
p{font-size:12px;line-height:130%}

设置行高(行间距)为字体的130%(12*1.3=15.6px)我们实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示的。

这里我们又得分两种情况:行内元素还是块状元素,块状元素里面又分为定宽块状元素以及不定宽块状元素。我们来了解一下行内元素怎么进行水平居中?如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置一行代码:text-algin:center来实现的。

但是当被设置元素为块状元素时用:text-align:center就不起作用啦,这时也分两种情况:定宽块状元素和不定宽块状元素。顶宽块状元素的情况是满足顶宽和块状两个条件的元素是可以通过设置"左右margin"
值为"auto"来实现居中的。如:


<body>
<div>我是顶宽块状元素,要水平居中。</div>
</body>
css:
<style>
div{
  border:1px solid red;/*为了显示居中效果,设置div边框*/
  width:200px;/*定宽*/
  margin:20px auto/*margin-left与margin-right设置为auto*/
}
</style>
也可以写成:
margin-left:auto;
margin-right:auto;
注意:元素的"上下margin"是可以随意设置的。在实际工作中我们会遇到需要为"不定宽度的块状元素"设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来显示它的弹性(不定块状元素:块状元素的宽度width不固定)
不定宽度的块状元素有三种方法居中(这三种方法目前使用都比较多):
1、加入table标签
2、设置display:inline方法与第一种类似,显示类型设为行内元素,进行不定宽元素的属性设置
3、设置position:relative和left:50%:利用相对定位的方式,将元素向左偏移50%即达到居中的目的。
先讲一下第一种,为什么选择加入table标签?是利用table标签的长度自适应性--即不定义其长度也不默认父元素body长度(table其长度根据其文本长度决定)因此可以看做一个定宽度快元素,然后再利用定宽度块状居中的margin方法,使其水平居中。
第一步:为需要设置的居中的元素外面加入一个table标签(包括<tbody>、<tr>、<td>)
第二步:为这个table设置左右margin居中(这个和定宽块状元素方法一样)
第二种方法是改变元素的display类型为行内元素,利用其属性直接设置。改变块
级元素的display为inline类型(设置为行内元素显示)然后使用text-align:center
来实现居中效果。
<body>
<div class="container">
 <ul>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
 </ul>
</body>
<style>
.container{
   text-align:center;
}
/*margin:0;padding:0(消除文本与div边框之间的间隙)*/
.container ul{
   list-style:none;
   margin:0;
   padding:0;
   display:inline;
}
.container li{
   margin-right:8px;
   display:inline;
}
</style>


这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的display类型改为inline,变成了行内元素,所以少了一些功能,比如设定长度值。
除了插入table以及改变元素的display类型,可以使不定宽块状元素水平居中之外还有第三种方法,设定浮动和相对定位来实现。通过给弗雷元素设置float,然后给父元素设置position:relativeleft:50%子元素设置position:relativeleft:-50%来实现水平居中。我们可以这样理解:假想ul层(下面例子的div层)的浮层中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线齐;而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中。代码如下:
<body>
 <div class="container">
   <ul>
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
   </ul>
  </div>
</body>
<style>
.container{
  float:left;
  position:relative;
  left:50%
}
.container ul{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
我们在实际工作中也会遇到需要设置垂直居中的场景,比如很多保值和文章标题左右一侧时,常常会设置为垂直居中,为了用户体验性好。然后这里又得分为两种情况:父元素高度确定的单行文本以及父元素高度确定的多行文本。
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。(height:该元素的高度,line-height:顾名思义,行高,又称行间距,指在文本中,行与行之间的基线间的距离。)line-height与font-size的计算值之差,在css中称为"行间距"。分为两半,分别加到一个文本行内容的顶部和底部。这种文字行高与块高一致带来一个弊端,当文字内容的长度大于块的宽时,就有内容脱离了块。如:
<div class=""container>
   hi,baby!
</div>
<style>
.container{
  height:100px;
  line-height:100px;
  background:#999;
}
</style>
父元素高度确定的多行文本、图片等的竖直居中的方法有两种:
方法一:使用插入table(包括tbody、tr、td)标签,同时设置vertical-align:middle
css中有一个用于竖直居中的属性vertical-align,在父元素设置此样式时,会对
inline-block类型的子元素都有用。如:


<body>
<table><tbody><tr><td class="wrap">
<div>
  <p>看我是否居中</p>
</div>
</td></tr></tbody></table>
</body>
<style>

table td{height:50px;background:#ccc}

<style>

因为td标签默认情况下就默认设置了vertical-align为middle,所以我们不需要显式的设置了。
除了table标签还有一种,我就不细说了,因为兼容性比较差。做前端最重要的一点就是兼容性的问题。ie6,ie7不支持的东西就拉倒了。
最后说一点,隐性改变display类型。有一个有趣的现象就是当元素(不论之前是什么类型的元素,display:none除外)

设置一下2个语句之一:

1、position:absolute

2、float:left或float:right

简单点来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以display:inline0-block(块状元素)的方式显示,当然就可以设置元素的width和height了,且默认宽度不占满父元素。
如下,都知道a标签是行内元素,所以设置它的width是没有效果的,但是设置为position:absolute(绝对定位)以后就可以了。


<div class="container">
  <a href="#" title="">进入</a>
</div>
<style>
.container a{
  position:absolute;
  width:200px;
  background:#ccc;
}
</style>
如果想不起来display:line-block是什么的可以回头看看"元素分类-内联块状元素"到这里,css的一些基础方面知识就说的差不多了。希望各位记住一点,一定要端正自己的态度,态度决定高度。一定不能眼高手低,不然会跟我一样吃了很多很多亏才好不容易绕回来。



原文链接:,转发请注明来源!
「html一些基础使用」评论列表

发表评论