day 49-css補充(終結)[浮動和定位]
阿新 • • 發佈：2017-12-25
class 控制 number red js文件 fixed 常用標簽 多選 lec 
老師的筆記:
前情回顧:
day49 混亂即階梯. 1. 前情回顧 HTML HTTP和HTML 文檔機構 <!Doctype html> HTML head <meta> <title> <link> icon <style> 直接寫CSS樣式 <link> CSS文件 <script> JS文件 body 常用標簽: div span h1~h6 a p img form input text password number email radio checkbox sumbit button reset select textarea label ul ol dl table 標簽屬性 id class style input name value type form 上傳文件的話 都記不住,但是都能想起來的那個(課後自己補上) select mutiple 多選 selected 默認選中 optgroup 分組顯示(label屬性=分組名) checkbox checked 默認選中 hidden 隱藏 input disabled input type=text/password readonly --> 只讀 placeholder --> 提示信息 CSS: 找到標簽 修改樣式 選擇器(找標簽): 基本選擇器 標簽選擇器 #ID選擇器 .class選擇器 *(大包大攬)選擇器 層級選擇器 後代選擇器(空格) 子選擇器(>) 毗鄰選擇器(+)/(label+input) 弟弟選擇器(~) 組合選擇器(,) 屬性選擇器 標簽可以自定義屬性 [egon] [egon=""]/input[type="button"] 偽類選擇器 a:hover(瀏覽器怎麽看) 選擇器的優先級: 1.!important 不講道理 2.內聯(直接在標簽上寫style屬性) 1000 3.ID選擇器 100 4.class選擇器 10 5.標簽選擇器 1 6.繼承的 CSS屬性: color 文本顏色 background 背景 background-color background-img background-position(具體數值) font 字體 font-family font-size font-weight line-height (垂直居中) text-aligin (水平居中) border 邊框 border-color border-style borfer-width border: 1px solid red; border-radius CSS盒子模型: content (內容) padding (內填充) border (邊框) magin (外邊距) margin:0 auto; (塊標簽的居中) a text-decoration=none (去掉下劃線)View Code
今日內容:
float(浮動)和position(定位)
float(浮動) left right none 浮動規則: 浮動只控制自己 如果前面的標簽也是浮動的,就挨著放 如果前面的標簽不是浮動的,在下一行開始擺放 清除浮動: clear: left right both none .clearfix:after { content: ""; display: block; clear: "both"; } :after和:before display: 塊級標簽特點: 獨占一行, 可以設置長和寬 內聯標簽特點: 可以放在一行,不可以設置長和寬,根據內容自適應長和寬 none --> 不顯示 block --> 塊級 inline --> 內聯 inline-block --> 既在一行顯示,又能設置長和寬 定位: relative (相對定位) 根據自己原來的位置來做定位 () absolute (絕對定位) 根據 往上找已經相對定位的元素的左上角 來做定位 (通常配合相對定位使用) fixed (固定定位) z-index 模態彈出框 z-index: 999 z-index: 1000View Code
day 49-css補充(終結)[浮動和定位]