元素的排列与布局排版display–inline(内联)&;block(块级元素)；
内联元素和块级元素的区别在于占据的文档流宽度不同。

内联元素默认宽度由其内容的宽度决定，且宽高不可设；

块级元素可设置宽高，并且占据整行宽度。

内联元素的宽度就是内容宽度；
块级元素的宽度为100%。
float–left(左定位)&;right(右定位)；
CSS中的float属性能够解决文档流模型中元素之间的布局问题。

使用float可以使得元素沿父元素指定的方向排列；

通过clear属性来清除浮动的影响。

overflow–auto自动滚动内容超出容器部分，滚动条出现；
scroll始终显示滚动条，无论内容是否超出；
hidden溢出内容被隐藏。
1.
之前解决父子关系垂直嵌套的合并塌陷问题。

清除浮动使用overflow–hidden隐藏内容超出部分；
滚动条样式使用scroll强制出现滚动条；
精灵技术目的：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

实现原理：只请求一张图–只是展示不同位置的小图。
案例使用：background-image背景图片&;background-repeat是否平铺&;background-position背景定位。

注意点：1.
精灵技术主要针对背景图片，插入的img不需要这个技术。
需要测量每个小背景图片的大小和位置；

给盒子指定小的背景图片时，背景定位基本是负值。
##布局技巧：

float属性的应用：
通过设置float属性，可以使元素在水平方向上排列成一行。在块级元素的容器中，浮动的子元素会按照从左到右的顺序，占据各自应有的文档流空间。

clear属性的作用：
如果父级容器包含多个浮动的子元素，clear属性可以用来清除左侧或右侧的浮动影响，确保内容在下一行正常开始排列。

overflow属性的运用：
当元素的内容超出其设定的大小或区域时，可以使用overflow属性来设置内容的显示方式。例如，可以使用auto来实现滚动条效果，或者使用hidden来隐藏超出部分。

响应式设计：
随着移动设备的普及，响应式网页设计变得尤为重要。CSS媒体查询可以用来根据屏幕像素密度和宽度等条件动态改变布局和样式。

伪元素的使用：
通过添加伪元素，如：before和：after，可以在保持内容结构的前提下，实现一些特定的视觉效果或者布局效果。

动画与过渡：
使用CSS3的@keyframes规则可以实现元素的平滑运动效果。而transition属性可以用来在两个值之间的状态变化时应用一段简短的过渡效果。

这些核心代码技巧对于网页设计师来说至关重要，掌握它们可以帮助我们更好地实现设计理念，提升用户的使用体验。下面是一些具体的例子：

案例：制作一个简单的水平导航栏

.navbar {
  width: 100%;
  overflow: hidden;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 更改颜色 on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

这个例子中，float: left;使导航链接居左对齐。overflow: hidden;用于清除浮动带来的影响。

总结：
CSS网页设计中的核心代码技巧是创建美观且功能完备网站的关键。通过合理运用这些技巧，我们可以实现更精细的布局、更加流畅的交互和更优的用户体验。持续学习和实践，相信你会成为一名出色的网页设计师。