编写代码中常见问题汇总(html和css)

简介: text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;

1.首行缩进两字符:

   text-indent: 2em;

2.将文字垂直居中:

方法一:将元素的行高line-height和高height的大小设置为一样的值。

方法二:给需垂直居中的元素中设置vertical-align:middle (只适用于行内元素(eg:img)的垂直居中)。

3.文字水平居中:

text-align: center;

4.清除列表自带样式(去除列表自带小圆点):

  list-style: none;

5.溢出隐藏:

 overflow: hidden;

6.背景不平铺:

 background-repeat: no-repeat;

7.纵向排列的块级元素变成横向排列:

 给元素设置浮动 float: left;

8.在项目中常用的定位方法:

父相子绝:父级元素设置相对定位作为参照物,子级元素设置绝对定位。

9.盒子的转换方式:

  w3c转怪异盒子:  box-sizing: border-box;

  怪异盒子转w3c:  box-sizing: content-box;

10.盒子塌陷(可以参考学习笔记三):

  常用的两种解决方式:A:给父级元素加边框
                  B:给父级元素设置溢出隐藏

11.相邻元素的边框并排显示,想要在视觉上实现这两条边框融合:

   将margin设为负值(   padding不可以设置为负值)。

12.一个参数 两个参数 三个参数 四个参数分别代表那个方位:

 一个参数:(上=下=左=右)

 两个参数:(上=下)(左=右)

 三个参数:上 (左=右) 下

 四个参数:上 下 左 右 

13.文本溢出出现省略号:

          A:单行文本溢出:{设置固定的宽度                              

                                           overflow: hidden;

                                            white-space: nowrap;

                                            text-overflow: ellipsis;  }

        B:   多行文本溢出:{设置固定的宽高

                                         display:-webkit-box;

                                        -webkit-box-orient: vertical;

                                        -webkit-line-clamp: 3;}

14.元素显示:

        display: block;

15.元素隐藏:

        display: none;(隐藏后元素将不继续占有原位置)

16.图像默认后面有一个空行,怎么解决?

        将Img转换为块级元素: display: block;

17.不想将图像转换为块级元素,又想将图像在父级元素中居中,怎么操作?

        给父级元素设置    text-align: center;

18.在排版中为了不让图像变形,在设置属性时要注意什么?

      只设置宽度或者高度,里一个值设置为自动(auto)。

1# 9.如果图像是1920px(或者更大,超过了屏幕的分辨率)的大小,怎么设置可以不让页面出现滚动条?
给图片设置 width: 100%; height: auto;

20.给盒子设置内阴影和灰色的背景颜色:

(这个颜色和内阴影的搭配效果非常好,记录下来,如果有需要的话可以直接复制使用)

   box-shadow: inset 0 0 15px rgba(0, 0, 0, .2);

    background-color: rgba(255, 255, 255, .1);

21.获取焦点时,怎么去掉表单元素自带的黑框?

   给元素设置 outline: none;

22.怎么给按钮去掉立体感(自带的边框)也可以用来清除input标签自带的边框?

  border:none;

23.怎么将文本框和按钮在一行显示,并且中间没有空隙?

   设置浮动,并去掉外边框。

24.怎么设置单击文字,对应的文本框获取焦点?

      <label for="name"><span>用户名:</span></label>

     <input type="text" placeholder="请输入用户名"  id="name">

25.怎么不让页面出现水平的滚动条?

     给屏幕设置x轴的溢出隐藏overflow-x: hidden;

26.在标准流下,怎么设置盒子水平居中?

    给盒子设置margin:0 auto;

27.对绝对定位的元素,怎么设置水平垂直居中?

     A:有固定宽度和高度:设置top值:(固定的高度减去元素的高度)/2

    B:无固定宽度和高度或者懒得进行计算:top:50%; transform:translateY(-50%);

28.显示与隐藏的两种方式:

    A:隐藏后不占空间,但是不能设置过渡动画   隐藏:  display: none;   显示 : display: block;

   B:隐藏后占空间,但可以设置过渡动画  隐藏:visibility: hidden; 显示: visibility: visible;

29.怎么设置动画匀速播放?

 引入动画后在animation 后面设置 linear  

 eg:animation: img2rotate 4s  1s infinite linear;

30.怎么使用伪类选择符给盒子清除浮动?

p::after{
clear: both;

        /* 清除浮动语句必须放在块状标签里面使用。 */

        content: "";

        /* ::after必须搭配内容conrent使用,但内容可为空 */

        display: block;

    /* 将标签转换为块级元素 */

    }

31设置字体没有效果

给元素设置字体的时候需要先设置文字大小,再设置字体,否则字体将不会起效。

.div{
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
/ 两者千万不能调换顺序,而且后置起效的前提是前者存在。 /
}
font 简写属性在一个声明中设置所有字体属性。

可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family"

.div{
font:italic bold 12px/30px Georgia, serif;
}

32.怎么设置可以让表格的边线重叠?

给table设置:border-collapse: collapse;

33.设置锚点链接平滑滚动到跳转位置
scroll-behavior:smooth;

相关文章
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
2天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
26 6
|
17天前
|
Java BI API
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
169 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
|
1天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
1天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
24天前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
58 1
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
6月前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
214 7
|
6月前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
92 6