以下內(nèi)容純屬個人對項目細節(jié)的總結(jié)，因為只是為了自己回顧方便，所以比較雜亂。

1、img

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

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

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

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

?—?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是一篇文章的一個章節(jié)，可以有自己的標題和頁腳】

?—?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是一篇文章，可以獨立出去】

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、對文本布局，可以使用column-count

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

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

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

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

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

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

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

h1和p同上。

span:布局里有兩個span，會放置在同一行，相當于display:inline;

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

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

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

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

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

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

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

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

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

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的效果并不會呈現(xiàn)出來，解決辦法有三個：

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

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

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

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

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

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

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

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

百度MIP的規(guī)范要求必須添加強制性標簽canonical,不然MIP校驗工具會報錯: 強制性標簽 缺失或錯誤 這 ...

【CSS進階】偽元素的妙用--單標簽之美

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

TODO：Laravel 使用blade標簽布局頁面

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

最新 去掉 Chrome 新標簽頁的8個縮略圖

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

css-父標簽中的子標簽?zāi)J位置

& ...

xpath提取多個標簽下的text

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

多個Img標簽之間的間隙處理方法

1.多個標簽寫在一行 ...

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

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

隨機推薦

JSP目錄

JSP目錄 ? 課時1 ? ?jsp概述和背后原理31:11 課時2? ??三種jsp的scriptlet語法27:29 課時3? ??jsp的注釋14:00 課時4? ??JSP4個域?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ù)庫時,死活連接不上.報錯如下: Could not load "……\bin\ ...

Android學習筆記1 android adb啟動失敗問題 adb server is out of date. killing...

總結(jié)

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

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