开发者社区> 好程序员> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

好程序员web前端培训分享怎样学好css?

简介:
+关注继续查看

  好程序员web前端培训分享怎样学好css?我推荐题主的学习方法就是:善用调试工具。
  使用谷歌浏览器进行调试,在属性不理解时可以直接在浏览器里进行数值调节
  css在书写时由于选择器权重问题经常出现样式覆盖的问题
  如果你的选择器书写正确,并且被划掉了。
  那应该就是权重不足导致的

下面是看起来很复杂的权重规则。
权重规则:HTML标签(类型选择符)的权重是1,class的权重是10,id的权重是100。
权重的表达方式如: 0,0,0,0;
类型选择符的权重为: 0,0,0,1
class选择符的权重为: 0,0,1,0
id选择符的权重为: 0,1,0,0
属性选择符的权重为: 0,0,1,0
伪类选择符的权重为: 0,0,1,0
伪元素选择符权重为: 0,0,0,1
内联样式的权重为: 1,0,0,0
注:如果权重相同时,则后面的样式生效;
权重值的计算规则略复杂,不再详细说明了
你就简单把这些权重值当成10进制进行求和,能解决大多数问题
结果出现的问题的时候,就升级为100进制,举例说明

a1 .a2 .a3 .a4 .a5

a1 #a2 .a5

以上两个选择器谁权重更大呢?
100 + 10 + 10 + 10 + 10
100 + 100 + 10
答案,很明显是第二个。

另外还有一些新手常见的,
搞不清楚可能会困扰你很久,但搞清楚了这都算个P的那种CSS问题
1、比如浮动所引发的问题
父元素未设置高度时,子元素浮动会导致父元素高度塌陷。
怎么解决?
给父元素固定高度,或者 父元素添加 overflow:hidden;
2、关于定位的问题
元素使用了绝对定位position:absolute
但是你的参考系却没有增加position:relative
导致元素(由于找不到参考系)会根据整个页面来定位
3、边框和padding问题
给元素增加边框和填充,都会影响盒子的大小
务必不能忽略这一点。
初学时,建议使用以下代码,进行CSS重置

  • {

    margin:0; padding:0

    }

4、margin的问题
margin:auto 只能实现元素左右居中,实现不了上下居中
5、要分清楚块元素和行内元素的区别
块元素默认都是100%宽度的,会独占一行
可以设定宽高大小
而行内元素,像 这种
设定不了宽高,从左到右排列
6、Img标签是特殊的存在
图片表现出来的特性和文字差不太多
可将图片理解为特殊的文字内容

7、选择器的含义
.page .con 和 .page.con 和 .page>.con三者的含义不同
.page>.con 大于号表示必须是子元素
.page.con 中间没有空格表示同时拥有两个类
.page .con中间有空格,表示所有后代包含子元素

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
好程序员web前端培训分享如何理解JS的单线程
好程序员web前端培训分享如何理解JS单线程,JS本质是单线程的。也就是说,它并不能像JAVA语言那样,两个线程并发执行。 但我们平时看到的JS,分明是可以同时运作很多任务的,这又是怎么回事呢? 首先,JS的代码,大致分为两类,同步代码和异步代码。
743 0
好程序员web前端培训分享CSS3实现全景图特效
  本篇文章好程序员web前端培训将给大家带来一个css3的黑-科技:如何仅仅使用css来实现全景图的效果?   首先定义一些基本的样式和动画  .panorama {  width: 300px;  height: 300px;  background-image: url(http://7vilbi.
4996 0
好程序员web前端分享CSS基础篇
学习目标1、CSS简介2、CSS语法3、样式的创建4、两种引入外部样式表的区别5、样式表的优先级和作用域6、CSS选择器7、选择器的权重8、浮动属性的简单应用9、HTML、CSS注释一、CSS简介css:层叠样式表 英文全名:cascading style sheets,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息的显示样式。
2302 0
好程序员web前端教程分享js闭包
好程序员web前端教程分享js闭包为了更好的理解闭包,从网上搜罗了很多资料,集各家之精华(自认为),拼拼凑凑自己总结了一下。 闭包 闭包是一个能读取其他函数内部变量的函数: 闭包是一个函数 这个函数能读取到其他函数内部的变量(局部变量) 他能让读取到的变量始终保存在内存中 闭包的缺陷: 闭包函...
739 0
好程序员web前端培训分享JS检查浏览器类型和版本
好程序员web前端培训分享JS检查浏览器类型和版本,先取得Navigator对象的userAgent属性的小写信息,之后根据正则表达式判断赋值。 var Sys = {};var ua = navigator.
1415 0
好程序员web前端分享CSS文件引用的最优方法
好程序员web前端分享CSS文件引用的最优方法,在html总引入css文件的方法:   1链接式:   2导入式:   区别:   使用链接式时,会在加载页面主体部分之前加载css文件,这样现实出来的页面一开始就是带有样式效果的,而使用导入式时,会在整个页面装载完成之后再装载css文件,对于有的浏览器来说,在一些情况下,如果页面文件的体积比较大,则会出现先现实无样式的页面,闪烁一下之后再出现设置样式的效果。
991 0
+关注
333
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载