美文网首页前端零碎
搭建页面时遇到的css问题集锦

搭建页面时遇到的css问题集锦

作者: 鸡毛菜菜子 | 来源:发表于2019-06-01 21:13 被阅读2次

1.两个div之间有空隙(出现这个问题可能是由于IE对CSS兼容不够导致的。在开头把边距清零相当于将各种浏览器的标准重置。)最简单的就是在CSS文件开头加一句*{ margin:0px;padding:0px} 强制所有对象内外边距为0,在开头把边距清零相当于将各种浏览器的标准重置。

2.div水平居中  {margin:0 auto;},其中文字水平居中) {text-align:center;}

居于网页正中间

3.设置页面整体背景颜色 整个页面设置为红色,body{ background:redf}

4.在搭建导航栏的时候为了增加字与字之间的间距,使用padding和margin,然后……

这时候设置行高line-height: 50px;左内边距padding-left: 10px;之后,哈哈哈哈

5.transition 、transform 和 translate的区别

transition是控制动画实现效果的一个属性,如transition : all 0.5s ease

transform的中文翻译是变换、变形,是css3的一个属性,和其他width,height属性一样

translate 是transform的属性值,是指元素进行2D变换,2D变换就是指,元素以当前位置(0,0)按照x轴的方向移动多少,按照y轴的方向移动多少

例如:

transform:translate(0,100%) 表示从元素的当前位置延y轴方向,向下移动整个元素高度的距离

transform:translate(-20px,0) 表示从元素的当前位置延x轴方向,向左移动20px

transform 有很多其它属性值,translate3D(3D变换),scale(2D缩放)等其他的变换方式

相关文章

  • 搭建页面时遇到的css问题集锦

    1.两个div之间有空隙(出现这个问题可能是由于IE对CSS兼容不够导致的。在开头把边距清零相当于将各种浏览器的标...

  • JavaScript学习笔记

    JavaScript -html搭建网页的结构和内容-css用于美化页面-JavaScript 给页面添加动态效果...

  • css布局细节问题处理方案

    css写页面时,遇到了以下的一些问题 每每写页面都要去搜索解决方案 ,现在整理如下,分享给朋友们: 1.背景图片高...

  • 遇到的问题集锦

    1.CFNetwork internal error (0xc01a:/BuildRoot/Library/Cac...

  • 兼容性问题

    CSS兼容性问题PC页面布局兼容JS兼容问题移动页面兼容问题 CSS兼容问题.header {_width:100...

  • 前端学习之CSS

    前言:HTML-页面结构,负责从语义的角度搭建页面结构;CSS-页面样式表现,负责从审美的角度美化页面;JavaS...

  • 2019-05-30 解决webpack多页面应用94% Ass

    遇见的问题: webpack搭建的多页面应用,当项目大了以后,修改一个简单的css,webpack热更新都很慢。通...

  • 1.2 JS的三部分组成

    Web页面由 HTML 搭建页面结构 CSS 编写页面样式 JS 完成人机交互效果:基本的人机交互效果;页面中具体...

  • 了解vue-cli3

    why 快速构建项目使用前后端分离搭建 前台,后台 前台 : 以html,css这种页面布局开发 [ 页面布局 ...

  • 对于margin塌陷和margin拖拽解决办法

    初次涉入前端这个领域,在用HTML和CSS写页面的时候遇到了一个问题,当我在想给子级设置margin top这句时...

网友评论

    本文标题:搭建页面时遇到的css问题集锦

    本文链接:https://www.haomeiwen.com/subject/cdrctctx.html