CSS 學習筆記

時間 2019-11-09

標籤 css 學習筆記欄目 CSS 简体版

原文原文鏈接

問題	答案
背景透明度	#99999911 最後兩位是透明度
下劃線	text-decoration
padding margin都有默認值嗎	有
後代選擇符	li a{ } a 便是 li 的後代
子選擇符(即不是孫)	div > strong{ }
通配選擇符	*
相鄰選擇符	li + li { } 即緊貼在第li後緊挨的li，注意只對後面的li生效
屬性選擇器	a[href="baidu.com"]{ }
以空格分隔挑選型的屬性選擇器	li[class~="warning"]{ }
僞類	a:link a:visited a:hover a:active :first-child :focus :lang(n)
僞元素	:first-letter :first-line :before :after 。我以爲沒意思，只是一些規則而矣，就像語法糖。
id選擇符最佳實踐	應用於總體網頁的大塊分隔元素，好比 header content navigation siteinfo等能夠和標籤選擇符，類選擇符，配合使用。好比 #content h3{}
修改li的前符	line-style-type: square;
文本對齊	text-align left right center justify(文本從左延伸至右)
每一個Html頁面都必須定義 DocTypes 簡稱 DTD	這樣才能保證 html驗證器和 css驗證器能正常工做
導入樣式方法	外部 <link href="test.css" rel='stylesheet' type='text/css' media='screen'/> 內部 <style> 裏內聯
媒體類型	好比在打印時應用 print的css 這沒什麼用
切換樣式表	<link href="test.css" rel='stylesheet' type='text/css' media='screen' title="a"/> 可用用 title 切換。在瀏覽器裏切換
postion	absolute 相對於瀏覽器窗口 top bottom left right 都是相對於窗口 relative 相對於元素在天然流中的定位的從新相對定位 top bottom left right 都是相對於原始位置
font-family	設置多個值，瀏覽器會依次去解析，直到能解析爲止最後一個一般是 serif，sans-serif 或 monospace
屬性繼承	大多數屬性能夠繼承除了和盒模型相關的好比 margin padding border background
文字大小的設置	百分比長度單位有兩類，絕對長度和相對長度絕對長度包括 in cm mm pt pc 一個pt是1/72英寸相對長度 em px font-size關鍵字
像素	從實際物理尺寸來講，是一個相對單位按照大小和網頁的比率來看，它則是絕對單位
em	經常使用，可是比 1em更小的文字有時很難看清
關鍵字方案	font-size xx-small x-small small medium large x-large xx-large larger smaller
一種好實踐	web排版默認的文字大小是16px body{ font-size: 62.5% } 這樣 1em 就是 10px
強制	! important
text-align 用在哪一種標籤裏	只能用於塊級，不能用於行內級
行首縮進	text-indent
行距	line-height
字符間距	letter-spacing word-spacing
background-position	可設數字 50px 60px 即 x 和 y 可設百分比 50% 即屏幕正中央
js庫實現圓角	niftycube.js
給滾動條着色	好比 scrollbar-face-color 等
一個橫向居中技巧	margin-left 和 margin-right 都設置爲 auto
要讓圖片元素居中的辦法	首頁在外面包一層div，由於div做爲塊級元素能佔一行。而img是行內元素，不會自動佔一行 { display:block; margin:0 auto; }
全部元素居中對齊最好的方式提早並不知道元素的寬和高	position: absolute; left: 50% ; transform: translateX( -50% ) translateY( -50% ) ; top: 50% ;
在頁面的最上層顯示一張圖片	用 lightbox
改變列表的標記	li:before{ content: ">>" 或 list-style-image: url( bullet.eps )
tips	title屬性
input 的type	居然還有一個 search
頁面佈局	div三縱排列時多使用 float: right float: right 等
float 浮動	取值有 right 或 left
flex	要學一下flex佈局。用一天的時間學習一下 block是垂直方向 inline是水平方向 flex沒有這些限制
display的值	none block 塊元素 inline 內聯 inline-block 行內塊元素
position的值	默認 static 正常文檔流定位 relative 相對定位 absolute 絕對 fixed 相對於窗口定位
background-origin 有哪些值	content-box padding-box border-box
文字陰影	box-shadow: 10px 10px 5px #888888
overflow	當溢出內容區時 scroll 必會出現滾動條 auto 子元素內容大於父元素時出現滾動條 visible 溢出的內容出如今父元素以外 hidden 溢出隱藏
須要學習一下 CSS Sprites

面試題

問題	答案
簡述盒模型	padding border margin
box-sizing	content-box 表示width只應用於content border-box 表示width應用於 content padding border
不可繼承的樣式	padding border margin width height
樣式優先級	!important最高後出現的高繼承的最低
如何讓div居中
display:none visibility: hidden	display：none 不顯示對應的元素，在文檔佈局中再也不分配空間（迴流+重繪） visibility：hidden 隱藏對應元素，在文檔佈局中仍保留原來的空間（重繪）
瀏覽器如何解析css	從右向左解析

全部元素的默認錨點	它的物理中心
改變錨點位置的方法	transform-origin: x-axis y-axis z-axis
ps裏能夠獲取 css	選擇層級 copy css
css全稱	cascading style sheet 層疊樣式表
css的目的	內容和表現的分離
文本對齊	text-align
文本是綠色	color （注意不是font-color也不是text-color）
背景的顏色	background-color
讓背景透明	background-color: transparent
子元素和父元素的樣式關係	子元素繼承父元素的樣式
有哪些選擇器	標籤選擇器類選擇器 id選擇器
樣式表的優先級	外部樣式表內部樣式表內聯樣式表，後面的優先級高
斜體字	font-style:italic
粗體字	font-weight:bold
1個像素的黑色點狀邊框	border:1px dotted #000000
周圍有10個像素的內邊距	padding: 10px
屬性和值選擇器舉例	[title=runoob] { border:5px solid green; } title是屬性 runoob是它的值
設置背景圖	background-image:url(/a/b/c.jpg) 2019-03-17的我認爲後面的路徑是至關於網站根目錄
devicePixelRatio 設備像素比	視網膜屏幕的iphone上，屏幕物理像素640像素，獨立像素仍是320像素，所以，window.devicePixelRatio等於2.
背景圖的重複方法	background-repeat: 可選值有 repeat-x repeat-y no-repeat 若是不設置本屬性，則在x和y向都無限平鋪
手動畫一個圓角背景	border-radius: 1rem 1rem 1rem 1rem
背景圖如何定位	background-position 有5個值 right left top bottom center 選一個表明橫向的，選一個代碼縱向的
background-origin什麼意思	它有三個值 content-box padding-box border-box 學完盒模型後，再來理解它
background-attachment	背景圖是否隨內容上下拉而移動 fixed 不移動 scroll 移動
text-indent	20px
text-align 經常使用值有哪些	left right center 用好這三個
單詞間橫向間距	word-spacing
字母間橫向間距	letter-spacing
字母的大小寫	這個其實不重要 text-transform 有三個值 uppercase lowercase capitalize
下劃線或者橫穿線	overline line-through underline
框模型	element padding border margin
padding 的寫法	padding: 上右下左也能夠分開寫成 padding-top padding-right padding-bottom padding-left 能夠寫正數或百分比百分比表示相對於父容器寬度的百分經
如何定義單邊樣式	border-top-style
margin	能夠是數值也能夠是百分比百分比也是父容器的寬爲基準外邊距有合併現象
塊級元素行內元素	div h2 p span strong
position有哪5個值	static fixed absolute relative sticky
定位屬性	top bottom left right
fixed定位的特色	Fixed定位使元素的位置與文檔流無關，所以不佔據空間。 Fixed定位的元素和其餘元素重疊。
position是relative時	left bottom right top 的值是相關於其正常位置的偏移量預留空間的元素仍保存在正常流動。
	scss 是 sass 3 引入的新的語法
position是static時	top bottom right left z-index 都無效即沒有定位，元素出如今正常的流中
position是absolute時	top bottom right left 都生效相對於static定位之外的第一個父元素進行定位設置爲絕對定位的元素框從文檔流徹底刪除
最內層容器如何在中層容器的中間	left: 0; right: 0; bottom: 0; top: 0; margin: auto;