《Head First HTML与CSS》学习笔记

2022.10.27 第11章学习

知识点记录

1. 设置float后，所指定的元素会与下方内容并排放置

   float: right;
   

2. 外边距margin

   /* 上边 | 右边 | 下边 | 左边 */
   margin: 2px 1em 0 auto;
   

3. clear指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。clear  属性适用于浮动和非浮动元素。

   /* 别想在我右边放浮动元素，死了心吧😂 */
   clear: right;
   

4. display在用网格实现双排页面时用到，设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。部分➡️案例源码下载

   div#tableContainer{
     display: table;
   /*并非总是建立布局的最佳工具，但这里想的到两个均匀的内容列是最佳解决方案*/
     border-spacing: 10px;
   }
    
   div#tableROW{
     display: table-row;
   /* all table elements have an equivalent CSS display value */
   }
   

   border-spacing指定相邻单元格边框之间的距离

   table类似html中的table

5. vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

   #drinks{
     display: table-cell;
     background-color: #efe5d0;
     width: 20%;
     padding: 15px;
     vertical-align: top;
   }
   

2022.10.28 第13章学习

知识点记录

1. border-collapse 决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

   table{
     border-collapse: collapse;
   	border-spacing：0px;//在边框分离模式下，间距设为0也可让两个边框挨着
   }
   

2. 伪类根据元素的状态指定元素的样式

   nth-child 找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类:nth-child 括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。

   tr:nth-child(2n){
     background-color: #fcedde;
   }
    
   tr:nth-child(2n+1){
     background-color: #fcba7a;
   }
   

3. **list-style-type**设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）。

    
   li{
   	list-style-type: "\\1F44D"; // thumbs up sign
   	
   	/* Partial list of types */
   	list-style-type: disc;
   	list-style-type: circle;
   	list-style-type: square;
   	
   	/* <string> value */
   	list-style-type: '-';
   	
    
   	/* Keyword value */
   	list-style-type: none;
    
   	/* 采用任意图像作为标识 */
   	list-style-image:url(images/name.format);
   	padding-top:5px;
   	margin-left:20px;//为图像增加更多空间
   }