Head First HTML与Css

最新推荐文章于 2022-07-28 16:05:44 发布

Huonnng

最新推荐文章于 2022-07-28 16:05:44 发布

阅读量1.3k

点赞数

分类专栏： Html与Css 文章标签：我的学习小结1

本文链接：https://blog.csdn.net/ZyonHuang/article/details/88615630

版权

Html与Css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于Head First HTML 与 Css的这本书学习时候遇到的一些不清晰的内容

标签:
div 用于标记逻辑区 </div 是他的结束标签
一般在使用的时候要加入id 或者加入class 来给他定义一个唯一的名字
方便在css中为他设置样式。
id的引用例子

<div id="elixirs">
     </div>                 
      -----------css:     #elixirs{   border-width: thin}

text-align 属性会对块元素中的所有内联内容对齐。它只能在块元素上设置，如果直接在内联元素上使用，则不起作用，

选择子孙的方法

div（这是父元素）+ 空格 +  h2（这是他的子孙）{       ...     }

这个规则指出要选择作为一个 div子孙的所有h2

使用id，能更特定的指定我们想要的子孙元素：
#elixirs h2{…} 这个规则指出要选择id为elixirs 的<div 的所有子孙 h2

记得简写边距后面的排列规律 ------------- 外边距，内边距：上右下左
其他的简写则不需要规律排放

span

span元素则是对内联元素的逻辑分组，和div类似

宽度的像素，就是把所有的----左右内外边距以及内容区的宽度加起来

float

属性值有 left right 分别是让内容左右浮动，浮动就是让他漂浮在所有元素的上面，可是内联元素有回围绕着 float的这个元素的内容。
然后，当布局使用的是float来布局的时候，页脚能使用clear来让他不让浮动元素遮挡

clear

他提出请求，当元素流入页面时，这个元素的左，右或两边都不允许有浮动的内容

关于布局
流体布局（liquid layout）：无论浏览器调整到多大布局会扩展填满整个浏览器
冻结布局：布局锁定，当用户调整屏幕大小的时候布局仍会保持原样

<body>
     <div id="allcontent">
             <div id="header">
                   .......rest of the Html........
             </div>
     </div>
</body>

----------css---------
#allcontent{
             width:800px; /*外围的allcontent <div>宽度总是800，即使浏览器大小调整了这个宽度也不变，这样就实现了冻结*/
             padding-top:5px;
             padding-bottom:5px;
             background-color:#675c47;
}

流体和冻结之间的布局---------凝胶布局！！
凝胶布局：会锁定页面中内容区的宽度，并且会把它在浏览器中居中。

#allcontent{
width:800px;
padding-top: 5px;
padding-bottom: 5px;
background-color:#675c47;
*margin-lef: auto;
margin-right:auto;*
/*allcontent 上没有固定的左右外边距，用auto，浏览器会确定正确的外边距是多少，另外还会确保左和右的外边距相同
}

定位

绝对定位：和浮动不同，绝对定位会从流中被删除，所以流中的元素不会将其内联的内容围绕在一个绝对定位的元素周围。z-index的大小可以决定睡在上面（绝对定位不能用clear，因为，他已经被从流中删除了）

#sidebar{
position: absolute:
top:100px;
right:200px;
width:280px;
}

用Css表格显示
利用css表格显示，可以用div划分逻辑区，然后放入表格内。

<div id="tableContainer">
 <div id="tableRow">
   <div id="main">
     ..
      </div>
      <div id="sidebar">
      ...
      </div>
    </div>
  </div>
  ------

–css-----------
1.首先为表格增加一个<div id为tablecontainer ，这个div包含行和列

div#tablecontainer{
 display:table;
}  
2

.接下来为行增加一个div，id为tableRow，一行就一个div，多行就多个div

div#tableRow{
display:table-row;
}
3

.最后，使用现有的main和sidebar作为单元格，对应行中的各列

#main{
display:table-cell;
...
}
#sidebar{
display:table-cell;
}

固定定位：和绝对定位类似，一样要为元素指定你希望的位置，不过这个位置是距浏览器窗口边界的一个偏移量，而不是距页面边界的距离，而且固定之后他就一直在哪里，不论你怎么上下滚动页面

#coupon{
position: fixed;
top:300px;
}

Huonnng

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Head First HTML与Css

关于Head First HTML 与 Css的这本书学习时候遇到的一些不清晰的内容标签:div 用于标记逻辑区 &lt;/div 是他的结束标签一般在使用的时候要加入id 或者加入class 来给他定义一个唯一的名字方便在css中为他设置样式。id的引用例子&lt;div id="elixirs"&gt; &lt;/div&gt; ...
复制链接

扫一扫