CSS 常用開發技巧

2021-08-30 08:17:23 字數 961 閱讀 7431

目錄

如何在點文字時也選中核取方塊或單選框？

如何讓單行文字在容器內垂直居中？

如何使文字溢位邊界顯示為省略號？

如何設定內聯元素的寬高？

效果如下：

**如下：

方式一：所有主流瀏覽器都支援：label 的 for 屬性值與 input 的 id 屬性值一致


選項一選項二


選項一選項二


方式二：相比方法1更簡潔，但ie6及更早瀏覽器不支援


label 標籤直接包含 input標籤


選項一選項二


選項一選項二
只需設定文字的行高等於容器的高度即可，當容器高度為絕對值時有效，如果容器高度為相對值，則無效。

萬里長城
首先需設定將文字強制在一行內顯示(white-space:nowrap)，然後將溢位的文字通過 overflow:hidden 截斷，並以 text-overflow:ellipsis 方式將截斷的文字顯示為省略號。

萬里長城永不倒
要使內聯元素可以設定寬高，只需將其定義為塊級或者內聯塊級元素即可。所以方法非常多樣，既可以設定display屬性，也可以設定float屬性，或者position屬性等等。

萬里長城永不倒


千里長江水滔滔

CSS常用技巧

css 使用技巧 1.可以避開css的盒模型考慮問題，指定margin和padding的值的時候在分別另外指定，後面的只將覆蓋前面的值。2.img 可以避免帶鏈結的邊緣出現藍色邊框，將以塊級元素顯示。3 nowrap 有時候我們要在首頁動態列印一列十條文章，要放在乙個css容器div裡面，若每行文字...

css常用技巧

水平居中元素 通用方法，元素的寬高未知 方式一 css3 transform parent child 方式二 flex 布局 parent 適用於子元素為浮動，絕對定位，內聯元素，均可水平居中。居中的元素為常規文件流中的內聯元素 display inline 常見的內聯元素有 span,a,img...

css常用技巧集合

1 不想讓按鈕touch時有藍色的邊框或半透明灰色遮罩 根據系統而定 解決方式一 webkit tap highlight color rgba 0,0,0,0 webkit user modify read write plaintext only webkit user modify有個 就是輸...