尺寸
属性 描述
height 设置元素高度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。
(1)设置图像的高度/宽度 height/width
img.normal { height: auto }
img.big { height: 160px }
img.small ( width: 30px)
img.big { height: 50% }
img.small ( width: 10%)
heigth/width的值是基于父元素来说的
注意图像会在保持高宽比的情况下进行伸拉
(2)设置元素的最大/最小:高度/宽度 max-height max-width
p{max-height: 300px;max-width: 50%;min-height: 100px;min-width: 200px}
注意:默认向下溢出,需要通过overflow来调整;经测试IE不生效;最大最小冲突时最小的生效;
(3)设置行间距
p.big{line-height: 200%}
p.normal{line-height: 20px} 在大多数浏览器中默认行高大约是 20px。
p.normal{line-height: 1} 拥有标准行高的段落。 默认行高大约是 1
分享到:
相关推荐
Hover.css中的特效可能还考虑了响应式设计,这意味着这些特效会在不同设备和屏幕尺寸下自适应。这通常通过媒体查询(Media Queries)来实现,根据设备特征调整样式。 六、JavaScript和jQuery增强 虽然主要依赖CSS3...
尽管2008年的响应式设计概念尚未普及,但书中已经暗示了这一趋势,探讨了如何通过CSS实现不同屏幕尺寸下的适应性布局。这对于后来的移动优先设计理念具有前瞻性的指导意义。 六、CSS重用与模块化 书中提倡使用CSS预...
#### 六、使用CSS进行布局设计 - **盒模型**:每个HTML元素都可以看作一个盒子,包括内容区、填充区、边框和外边距。 - **浮动**:通过浮动元素可以让元素脱离正常的文档流,通常用于创建多列布局。 - **定位**:...
这包括对表格行、列的样式控制,以及如何实现响应式表格布局,以适应不同屏幕尺寸。 ### 五、表单与用户界面 在“表单和用户界面”部分,作者详细介绍了如何使用CSS来增强HTML表单的外观和交互性。这包括自定义...
4. 响应式设计:媒体查询`@media`适应不同设备和屏幕尺寸。 六、实战应用 学习HTML和CSS不仅涉及理论知识,更需要动手实践,通过创建简单的静态网页,逐渐进阶到复杂的响应式布局。了解浏览器兼容性问题,掌握调试...
**六、CSS3新特性** 1. **过渡(Transitions)**:平滑地改变元素的属性值。 2. **动画(Animations)**:通过关键帧创建复杂的动态效果。 3. **阴影(Box Shadow)**和**文本阴影(Text Shadow)**:增加视觉深度。...
1. 媒体查询(Media Queries):允许CSS针对不同的设备特性,如屏幕尺寸和分辨率,应用不同的样式,实现响应式布局。 2. 弹性布局(Flexbox)和网格布局(Grid):这两种现代布局模式简化了复杂的布局设计,尤其是...
六、CSS预处理器 1. 预处理器如Sass、Less和Stylus,提供变量、嵌套规则、混合和函数等功能,使CSS编写更高效且易于维护。 七、CSS性能优化 1. 选择器效率:避免使用复杂选择器,优先使用ID选择器和类选择器。 2...
1. 媒体查询:`@media`规则允许根据设备特征(如屏幕尺寸)应用不同的CSS样式,是实现响应式设计的关键。 2. 弹性单位:如`em`和`rem`,基于父元素或根元素的字体大小进行动态计算,适应不同屏幕尺寸。 3. ...
六、CSS性能优化 优化CSS性能包括减少HTTP请求、压缩CSS文件、移除无用样式等。在“sinolog”实例中,可能通过合并多个CSS文件为一个、利用CSS Sprites减少图像请求,以及使用工具如Autoprefixer自动添加浏览器前缀...
六、CSS动画与过渡 1. `transition`属性:实现元素在不同状态间的平滑过渡。 2. `animation`属性:定义自定义动画,包括动画名称、时长、延迟、填充模式等。 七、CSS新特性 1. 变量(Custom Properties):允许...
六、CSS工具和框架 1. CSS框架:Bootstrap、Foundation等框架提供了预设的样式和组件,加快开发速度。 2. CSS预处理器工具:如Gulp、Webpack等,自动化处理CSS,如编译预处理器语法、自动添加前缀等。 通过学习这个...
六、CSS预处理器 1. Sass、Less和Stylus等预处理器扩展了CSS的语法,引入变量、嵌套规则、函数等功能,使代码更易于管理和维护。 七、工具与优化 1. CSS压缩与合并:通过工具如Autoprefixer自动添加浏览器前缀,CSS...
### 第六章:CSS属性 - CSS属性涵盖广泛,如字体相关的`font-family`、`font-size`,布局相关的`margin`、`padding`,背景相关的`background-color`、`background-image`,以及盒模型属性`border`、`box-sizing`等...
六、CSS新特性 1. Grid Layout、Flexbox、CSS Grid和Flexbox的组合提供了更强大的布局解决方案。 2. CSS变量(Custom Properties)允许在全局范围内定义和使用变量。 3. CSS Grid Auto Placement和Auto Fill/Masonry...
- `background-size`: 控制背景图像的尺寸。 - `background-position`: 定义背景图像的位置。 ### 四、阴影效果 - `box-shadow`: 添加元素的阴影效果。 - `text-shadow`: 给文本添加阴影效果。 ### 五、变形与...
**六、CSS预处理器** CSS预处理器如Sass(SCSS)、Less和Stylus,扩展了CSS的功能,引入变量、嵌套规则、混合、函数等特性,提高了代码的可读性和可维护性。预处理器编译后生成标准的CSS,可以在所有浏览器中运行。 ...
这些属性定义了元素的尺寸以及与其他元素的空间关系。 3. **文字系列**:`font`, `line-height`, `letter-spacing`, `color`, `text-align`等。这些属性用于控制文本的样式和排列。 4. **背景**:`background`, `...
六、CSS预处理器 1. Sass:引入变量、嵌套规则、混合(mixins)等功能,使CSS编写更有序和模块化。 2. Less:类似Sass,但语法略有不同,同样提供更强大和灵活的CSS编写能力。 3. Stylus:支持函数、条件语句等,为CSS...