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

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

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)。

19.如果图像是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;

相关文章
|
15天前
网站维护更新简易单页404页html代码
一个简约风格的单页html页面,可用于网站维护中或更新网站时挂个首页使用,如果不喜欢现在的颜色请F12修改设置既可。
18 1
网站维护更新简易单页404页html代码
|
5天前
|
XML 数据格式 Python
Python技巧:将HTML实体代码转换为文本的方法
在选择方法时,考虑到实际的应用场景和需求是很重要的。通常,使用标准库的 `html`模块就足以满足大多数基本需求。对于复杂的HTML文档处理,则可能需要 `BeautifulSoup`。而在特殊场合,或者为了最大限度的控制和定制化,可以考虑正则表达式。
21 12
|
6天前
|
前端开发 JavaScript
用最少的代码实现一个HTML可交互表格
该HTML页面展示了一个可交互的表格,用户可以通过点击表格行来高亮显示所选行。使用了基本的`&lt;table&gt;`结构,并通过CSS设置了表格样式及行悬停效果。JavaScript函数`toggleSelect`实现了行选中的切换功能。
|
10天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
8天前
|
缓存 JavaScript 前端开发
js和html代码一定要分离吗
JavaScript(JS)和HTML代码的分离虽非绝对必要,但通常被推荐
|
8天前
|
前端开发 JavaScript 开发者
html怎么写才能让代码易读易维护
为了提升HTML代码的可读性和可维护性,应采用语义化标签(如`&lt;header&gt;`、`&lt;nav&gt;`)描述内容意义,保持一致的缩进风格,使用描述性类名和ID,将相关元素分组并添加注释说明,避免内联样式,保持文件结构清晰,利用格式化工具自动整理代码,减少嵌套层级,并遵循W3C标准以确保代码的有效性。这些实践有助于提高开发效率和代码质量。
|
7天前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
JavaWeb基础4——HTML,JavaScript&CSS
|
20天前
|
移动开发 JavaScript 前端开发
揭秘!如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站?你的设计梦想即将照进现实!
【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py,并启动服务器。接着,在Web2py中创建新应用,例如命名为“ResponsiveSite”。随后,编写HTML5基本结构,包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码,实现响应式布局。最后,通过在`scripts.js`中加入jQuery脚本提升页面交互性,如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础,便于进一步扩展和优化。
12 1
|
23天前
|
移动开发 前端开发 JavaScript
HTML与CSS二三事
HTML与CSS二三事
|
6天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
11 0

相关实验场景

更多