以下內(nèi)容純屬個(gè)人對(duì)項(xiàng)目細(xì)節(jié)的總結(jié)，因?yàn)橹皇菫榱俗约夯仡櫡奖?#xff0c;所以比較雜亂。

1、img

如果不指定img的高度和寬度，則img顯示的是原圖片的大小；如果只指定了高度和寬度中的一者，則為指定的一者等比例的縮放因子相同；如果同時(shí)指定了二者，則高度和寬度都變化；

在img外面套上div的標(biāo)簽，指定div的width和height，如果比img的大小小，則img會(huì)溢出div；如果div指定的overflow為hidden，則溢出部分被隱藏。

2、div,article,section的區(qū)別(都是塊級(jí)元素，可以用于盒子模型)

— the?generic flow container?we all know and love. It’s a block-level element with no additional semantic meaning (W3C:Markup,?WhatWG) ? ?【div沒有任何語義，它就是一個(gè)基本流的容器】

?—?a generic document or application section. A??normally has a heading (title) and maybe a footer too. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface. (W3C:Markup,?WhatWG) ?【section是一篇文章的一個(gè)章節(jié)，可以有自己的標(biāo)題和頁腳】

?—?an independent part of a document or site. This means it should be able to ‘stand alone’, and still make sense if you encountered it somewhere else (e.g. in an RSS feed). Examples include a weblog article (duh), a forum post or a comment. Like??these generally have a header, and maybe a footer (W3C:Markup,?WhatWG) 【article是一篇文章，可以獨(dú)立出去】

To decide which of these three elements is appropriate, choose the first suitable option:

Would the enclosed content would make sense on it’s own in a feed reader? If so use?

Is the enclosed content related? If so use?

Finally if there’s no semantic relationship use?

3、對(duì)文本布局，可以使用column-count

4、行間距可以用百分?jǐn)?shù)來設(shè)定，例如：line-height:100%

5、line-height 與 font-size 的計(jì)算值之差(在 CSS 中成為“行間距”)分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部。

6、div, h1,p, span,經(jīng)常在這四個(gè)標(biāo)簽中包含文字，現(xiàn)在比較一下：

width和height:對(duì)div, h1, p均有效，span不支持

div:布局里有兩個(gè)div，由于塊級(jí)元素后面加了換行符，因此是上下各放置一個(gè)；相當(dāng)于display:block;

如果設(shè)置display:inline-block的話，則這兩個(gè)div會(huì)水平放置，width和height仍然生效；

如果設(shè)置為display:inline的話，則這兩個(gè)div會(huì)完全變成span的樣式，即水平放置，但是width和height都不生效；

h1和p同上。

span:布局里有兩個(gè)span，會(huì)放置在同一行，相當(dāng)于display:inline;

如果設(shè)置為display:inline-block和display:block時(shí)，和div標(biāo)簽相同；

注意的是：這4個(gè)標(biāo)簽，設(shè)置為display:block時(shí)，塊級(jí)元素間的距離是不同的，這點(diǎn)不知道是為什么。

7、text-align的值，只用于文本，常用的有：left,right,start,center;

8、vertical-align:使用該屬性的元素的display需要設(shè)置成inline-block

9、要想要塊級(jí)元素中的文字居中，讓line-height和塊級(jí)元素的height相同即可

10、div標(biāo)簽要指定background，需要給【該】div標(biāo)簽指定width和height，才能顯示

和img不同，img指定寬度和高度后，顯示的仍然是完整的圖片；background指定后，如果width或者h(yuǎn)eight比圖片(背景是圖片的話)小，顯示的是圖片的部分；如果更大，也不會(huì)放大圖片；因此可以通過指定width,height,position來完成只顯示圖片的固定部分。

11、兩個(gè)塊級(jí)元素要放置在同一行，需要把它們兩個(gè)都設(shè)置成display:inline-block，而不是把它們的父級(jí)元素設(shè)置成inline-block

12、當(dāng)設(shè)置一個(gè)元素的熟悉為box-sizing:border-box;時(shí)，此元素的內(nèi)邊距和邊框不再會(huì)增加它的寬度。

13、

#outer {

width: 500px;

height: 200px;

background: #FFCCCC;

margin: 50px auto 0 auto;

display: block;

}

#inner {

background: #FFCC33;

margin: 50px 50px 50px 50px;

padding: 10px;

display: block;

}

Hello world!

由于css的特性，以上inner的margin-top:50px的效果并不會(huì)呈現(xiàn)出來，解決辦法有三個(gè)：

1)給inner元素加上display:inline-block屬性

2)給outer元素加上：padding-top:1px

3) 給outer元素加上:overflow：auto

a標(biāo)簽點(diǎn)擊跳轉(zhuǎn)失效--IE6、7的奇葩bug

一般運(yùn)用a標(biāo)簽包含img去實(shí)現(xiàn)點(diǎn)擊圖片跳轉(zhuǎn)的功能,這是前端經(jīng)常要用到的東西. 今天遇到個(gè)神奇的bug:如果在img上再包裹一層div,而且div設(shè)置了width和height,則圖片區(qū)域點(diǎn)擊時(shí),無任何 ...

IE6、7下html標(biāo)簽間存在空白符，導(dǎo)致渲染后占用多余空白位置的原因及解決方法

直接上圖:原因:該div包含的內(nèi)容是靠后臺(tái)進(jìn)行print操作,輸出的.如果沒有輸出任何內(nèi)容,瀏覽器會(huì)默認(rèn)給該空白區(qū)域添加空白符.在IE6.7下,瀏覽器解析渲染時(shí),會(huì)認(rèn)為空白符也是占位置的,默認(rèn)其具有字 ...

百度MIP頁規(guī)范詳解 —— canonical標(biāo)簽

百度MIP的規(guī)范要求必須添加強(qiáng)制性標(biāo)簽canonical,不然MIP校驗(yàn)工具會(huì)報(bào)錯(cuò): 強(qiáng)制性標(biāo)簽 缺失或錯(cuò)誤 這 ...

【CSS進(jìn)階】偽元素的妙用--單標(biāo)簽之美

最近在研讀?(CSS揭秘)這本大作,對(duì) CSS 有了更深層次的理解,折騰了下面這個(gè)項(xiàng)目: CSS3奇思妙想?-- Demo (請(qǐng)用 Chrome 瀏覽器打開,非常值 ...

TODO：Laravel 使用blade標(biāo)簽布局頁面

TODO:Laravel 使用blade標(biāo)簽布局頁面 本文主要介紹Laravel的標(biāo)簽使用,統(tǒng)一布局頁面.主要用到到標(biāo)簽有@yield,@ stack,@extends,@section,@stop, ...

最新 去掉 Chrome 新標(biāo)簽頁的8個(gè)縮略圖

chrome的新標(biāo)簽頁的8個(gè)縮略圖實(shí)在讓人不爽,網(wǎng)上找了一些去掉這個(gè)略縮圖的方法,其中很多已經(jīng)失效.不過其中一個(gè)插件雖然按照原來的方法已經(jīng)不能用了,但是稍微變通一下仍然是可以用的(本方法于2017.1 ...

css-父標(biāo)簽中的子標(biāo)簽?zāi)J(rèn)位置

& ...

xpath提取多個(gè)標(biāo)簽下的text

title: xpath提取多個(gè)標(biāo)簽下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

多個(gè)Img標(biāo)簽之間的間隙處理方法

1.多個(gè)標(biāo)簽寫在一行 ...

html5標(biāo)簽canvas函數(shù)drawImage使用方法

html5中標(biāo)簽canvas,函數(shù)drawImage(): 使用drawImage()方法繪制圖像.繪圖環(huán)境提供了該方法的三個(gè)不同版本.參數(shù)傳遞三種形式: drawImage(image,x,y):在 ...

隨機(jī)推薦

JSP目錄

JSP目錄 ? 課時(shí)1 ? ?jsp概述和背后原理31:11 課時(shí)2? ??三種jsp的scriptlet語法27:29 課時(shí)3? ??jsp的注釋14:00 課時(shí)4? ??JSP4個(gè)域?qū)ο蟮淖饔糜? ...

JS瀏覽器全屏

//全屏 function fullScreen() { var el = document.documentElement; var rfs = el.requestFullScreen || el ...

轉(zhuǎn)載——PLSQL developer 連接不上64位Oracle 解決辦法

前兩天剛下載了oracle 11g 64位的最新版本,安裝成功之后,再安裝PLSQL.結(jié)果使用PLSQL訪問數(shù)據(jù)庫時(shí),死活連接不上.報(bào)錯(cuò)如下: Could not load "……\bin\ ...

Android學(xué)習(xí)筆記1 android adb啟動(dòng)失敗問題 adb server is out of date. killing...

總結(jié)

以上是生活随笔為你收集整理的html dvi如何设置置顶不能空白位置,[html]关于html标签的一些总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。