CSS入门模仿网页笔记

最新推荐文章于 2024-03-31 09:38:58 发布

原创最新推荐文章于 2024-03-31 09:38:58 发布 · 709 阅读

1 ·

CC 4.0 BY-SA版权

CSS 同时被 2 个专栏收录

6 篇文章

订阅专栏

html

3 篇文章

订阅专栏

这篇博客介绍了CSS入门的一些关键知识点，包括导航栏的设置，如何处理inline-block的间距问题，浏览器窗口大小改变时的布局调整，字体颜色、超链接、边框阴影的设置，以及input元素和伪元素的限制。博主分享了在学习过程中遇到的挑战和解决方案，强调了学习总结和代码组织的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航栏设置–注意点

当子元素li设置浮动为左浮动时，会导致父元素高度坍塌，注意在父元素中补充overflow:hidden;闭合浮动。
line-height设置行间距，用于撑开盒子高度

横向排列

制作导航栏时，需要横向排列三个div。
关于布局方法的问题，是使用display:inline-block;还是浮动属性float，参考链接：css之使用display:inline-block;布局

解决过程中还了解到，inline-block的排列规则参考如下：
在这里插入图片描述

inline-block间距问题

解决办法：让水平间隙消失就是在父级上加font-size:0;让垂直间隙消失，就在子元素上加vertical-align:bottom;
如果子标签内加上任意文字，则display:inline-block元素不会生成垂直方向有空白！

参考链接:【CSS】inline和inline-block的间距

浏览器窗口大小改变布局

在缩小页面时，发现布局会随浏览器大小的改变而变化，想给body设置固定宽度解决布局问题，但是body无法设置宽高，需要另外写div；但是另外写div并没有解决布局变化的问题。
在这里插入图片描述
暂时无法解决以上问题时，又发现logo和daohang这两个元素position应取值为fixed固定在上方，修改代码后，原先的问题就不复存在。但是对于布局的问题还具有疑问尚待解决。

字体颜色

设置color

超链接

是行内元素无法设置宽高

边框阴影

设置box-shadow
例子：box-shadow:5px 5px 5px rgba(22, 50, 80, 0.3);

input不支持伪元素

参考链接：input不支持伪元素after、before

关于宽度100%的设置

参考链接：width为auto或者100%的区别

CSS设置内容超出后显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

参考链接：CSS设置内容超出后显示省略号

:hover操纵自己包含的子元素以外的元素

通过>与+来控制下个元素，子集元素，下个元素的子集元素的CSS

例子如下：

<html>
<body>
<style>
    #a {color : #FFFF00;}
    #a:hover > #b{color : #FF0000;}    
    #a:hover + #c{color : #00FF00;}
    #a:hover + #c > #b{color : #0000FF;}
</style>
<div id='a'>元素1
  <div id='b'>元素2</div>
</div>
<div id='c'>元素3
  <div id='b'>元素2</div>
</div>
</body>
</html>