CSS

1.使用浮動布局優點：相容性比較好。缺點：浮動後，元素是脫離文檔流的，需要謹慎處理好清除浮動還有浮動的元素和周邊元素之間的關係<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>頁面配置</title> <style> * { margin: 0; padding: 0; }

浮動因素在靜態網頁製作中經常被應用到，比如要讓區塊層級元素不獨佔一行，常常應用設定float的方式來實現。但是應用的時候會發現，設定了子類浮動後，未給父類清除浮動，這樣就會造成一下問題：　　　　　　　　1.浮動的元素會相對於父容器或者是前面已經定位的元素進行浮動，浮動的元素脫離文檔流，也就是不再佔有原有的位置，會影響後面的元素或者是父容器。　　　　　　　　2.父容器正常情況下會自動擴高，但是子項目加了浮動後位置不保留，父容器就感覺它不存在了，所以不會擴高。所以，在編寫靜態網頁時，一定要注意浮動的

overflow 屬性規定當內容溢出元素框時發生的事情①visible 預設值。內容不會被修剪，會呈現在元素框之外。②hidden 內容會被修剪，並且其餘內容是不可見的。③scroll 內容會被修剪，但是瀏覽器會顯示捲軸以便查看其餘的內容。④auto 如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘的內容。⑤inherit 規定應該從父元素繼承 overflow

這篇文章主要介紹了css3之UI元素狀態偽類別選取器 ,其中包括hover、active和focus,enabled,disabledread-only與read-write 等等,需要的朋友可以參考下所謂UI選取器：就是指定的樣式只有當元素處於某種狀態下時，才起作用，在預設狀態下不起作用！瀏覽器安全色性：E:hover 支援firefox、safari、Opera、ie8、chrome ------------E:active

對於學習前端的童鞋，css的掌握是必須的。今天就來實現用css畫出一棵聖誕樹。主要練習的是css裡面border的練習與掌握程度。在body建立一個主地區<p></p>：我們用border搭建的三角形在主地區內。改主地區的背景色：可以給設定一個高度 建立第一個三角形：

CSS中關於focus偽類的使用執行個體詳解；css中：focus偽類的使用，即給已擷取焦點的元素設定樣式樣本一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>:focus</title> <style> *{ margin: 0;

3.5.2　box-shadow屬性使用方法（1）和PSD軟體製作圖片相比，box-shadow修改元素的陰影製作效果要方便得多，因為box-shadow可以修改六個參數，得到不同的效果。下面結合一些簡單的案例來對box-shadow屬性進行示範說明。1．單邊陰影製作效果定義元素的單邊陰影製作效果和調協border的單邊邊框顏色是相似的，例如：> <html lang="en-US"> <head> <meta

這篇文章主要介紹了css box-shadow實現曲邊陰影與翹邊陰影,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧大家都知道box-shadow是h5新增屬性，用來實現盒子邊緣有陰影的效果，但經常會看見許多情境裡陰影的樣式各種各樣，並不是簡單的四周有陰影的效果，它們是怎麼實現的呢，今天就跟大家分享兩種陰影實現的方法。一、曲邊陰影如下：它不僅是四周有陰影，下部還有一層曲邊的陰影，它的原理其實很簡單，首先盒子自身有陰影，然後在使用另一個有陰影的盒子重疊形成裡的曲邊陰影。

這篇文章主要介紹了css實現0.5像素的邊框,這裡整理了詳細的代碼,非常具有實用價值，需要的朋友可以參考下公司的設計師在做設計圖的時候都是以iphone6（寬為750物理像素）為基準進行設計的。iphone6的裝置像素比（即css像素與物理像素的比例）是2，所以設計師在設計圖畫了邊框為1px的box的時候，相對於css代碼來說就是0.5像素。對於這個問題，最直觀的方法就是css直接設定邊框為0.5px，經過測試，iPhone可以正常顯示，android下幾乎所有的瀏覽器都會把0.5識別為0，即無

css3中的線性漸層線性漸層公式：background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, <color-stop> [, <color-stop>]+ );意為：(角度deg或者方位詞,一個或多個漸層顏色關鍵結點（多個的話用","隔開）);此種寫法跟Regex類似：[ ]：代表一個字元位，一般跟 “|” 連用，表示從[ ]中選擇一個；|：表示“或”，

如下： 就像是一圈圈螞蟻在它身上爬。。。。。emmmmm奇特的比喻fill:none;可以讓圖形不被填充，如果不添加這一屬性，則預設填充顏色是black，這個效果發現stroke這一系列屬性都很有意思啊，填充啊透明度和stroke-linecap，但是這個效果用的最多的還是stroke-dasharray和stroke-dashoffset。stroke-miterlimit 表示描邊相交（銳角）的表現方式。預設大小是4.

最近幾年隨著響應式布局的發展，一次開發多次使用，自適應螢幕的響應式網站的需求越來越多。但是怎樣使得網站能自適應螢幕呢？這裡就需要提到一個css3裡面新增的技術了-media媒體查詢器。那麼什麼是media媒體查詢器呢？Media媒體查詢器是CSS3新增的一個可以檢測開啟網站的終端的螢幕解析度的技術。Media媒體查詢器的使用方法大致如下：1.設定一個meta標籤如：<meta

什麼是區塊層級元素（Block-level elements）?  瀏覽器通常在元素之前和之後都使用分行符號顯示區塊層級元素。您可以將其可視化為一堆框。   區塊層級元素始終在新行上開始，並佔用可用的全寬（儘可能向左和向右擴充）。 用法：區塊層級元素可能只出現在<body>元素內。什麼是內嵌元素（Inline elements）？  在HTML中，內嵌元素是僅佔據由定義元素的標籤界定的空格，而不是破壞內容的流。在本文中，我們將檢查HTML內嵌元素以及它們與區塊層級元素的區別。

每次使用box-shadow,都要查閱資料才能實現對應的效果,現在總結一下,方便以後查看。一、文法： E {box-shadow: inset x-offset y-offset blur-radius spread-radius color}; E {box-shadow: 投影方式 X軸位移量 Y軸位移量 陰影模糊半徑 陰影擴充半徑 陰影顏色}; 二、取值： 1. 陰影類型：此參數可選，預設的投影方式是外陰影；如果取其唯一值“inset”,就是將外陰影變成內陰影；

這篇文章主要介紹了HTML+CSS實現單選框、複選框美觀的樣式,需要的朋友可以參考下1.背景圖html<p class="check-wrappers"> <span class="c-checkbox checked"> <input type="radio" autocomplete="off" name="type" style="

display:none視為不存在且不載入，即，不為被隱藏的對象保留其物理空間，即該對象在頁面上徹底消失。visibility:hidden隱藏，但在瀏覽時保留位置，即，使對象在網頁上不可見，但該對象在網頁上所佔的空間沒有改變。 使用

web頁面前台編碼時經常用到display:none樣式，平常使用時發現有幾點特徵需要注意1、如果在樣式檔案或分頁檔代碼中直接用display:none對元素進行了隱藏，載入頁面後，在沒有通過js設定樣式使元素顯示的前提下，使用js代碼會無法正確獲得該元素的一些屬性，比如offSetTop,offSetLeft等，返回的值會為0，通過js設定style.display來使元素顯示後才能正確獲得這些值。

font-weight允許值 normal | bold | bolder | lighter | l00 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 font-weight初始值 normal font-weight可否繼承 是 font-weight適用於 所有元素為理解使用者代理程式怎樣決定字型變形的粗細，得先從關鍵字100到900談起，然後我們再來看它是如何繼承的。

我之前設定了font-weight:bolder;一直不明白為什麼在瀏覽器上顯示最後的效果就變成了normal呢，後來查了一下才發現bolder是相對父元素的。如果父物件的值為 normal，子物件值設為 bolder，則最終以 bold，即粗體顯示。而我的父元素有設定過font-weight:200;所以最後顯示就變成了normal的效果了。 font-weight 字型濃淡(精細)屬性值：normal | bold | bolder | lighter | 100 | 200 | 300 |

list-style-type -- 定義列表樣式取值:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inheritdisc: 點circle: 圓圈square: