padding

可爱的博客园样式之自定义“评论区”样式

由 早过忘川 提交于 2019-12-01 11:45:39
# cute-cnblogs 评论区代码美化 说明 一些人可能比较喜欢个别区域的，这里是博客园评论区的样式代码。 （PS：基于博客园主题“SimpleMemor”进行的样式修改，勾选禁用默认样式了，可能主题不同，class啥的也不同，不同的只能自己耐心改一下啦~） OωO表情是插件喔， github ，就是图片类型的需要js进行处理，因为发表评论的引入使用不一样，具体可以自行对比下官网与我引入的js，也可直接拿我的js去用~。 css /*评论区*/ #commentform_title, .feedback_area_title {font: normal normal 16px/35px"Microsoft YaHei";margin: 10px 0 30px;border-bottom: 2px solid #ccc;background-image: none;padding: 0;border-bottom: 0;} #commentform_title:after, .feedback_area_title:after {content: '';display: block;width: 100%;text-align: center;position: relative;bottom: 16px;left: 110px;border-bottom: 1px

Padding causes horizontal scroll - it increases the width

由 空扰寡人 提交于 2019-12-01 11:19:42
Please look at this code: <html> <head> <style type="text/css"> html, body{ width:100%; height:100%; margin:0px; } #header{ width:100%; height:100px; position:fixed; display:inline-block; background-color:red; padding:0 10px 10px 10px; } </style> </head> <body> <div id="header"> <div id="header-container"> </div> </div> </body> </html> here is the demo . The header must have 100% width and 10px padding from left,right and bottom. please look at this picture this is the layout of #header by firebug. as you can see the right padding is not in the image because the 10px padding is added to the

滚动条出现挤压页面宽度，影响布局

由 风流意气都作罢 提交于 2019-12-01 10:29:28
问题描述：当页面突然出现滚动条的时候，页面会突然被挤压，因为滚动条也是需要占位的呀。 解决思路：现在目标就是滚动条出现，但是内容位置不变，依然不动。 * { margin: 0; padding: 0; } html { overflow-y: overlay; } .container { height: 200px; padding: 17px; background-color: #00b83f; text-align: right; } <div class="container"> <h1>我是容器内容</h1> </div> 1、新属性overlay chrome下 overflow 有个新的属性值 overlay ，这个属性简直就是为了这个问题而生，他和 auto 有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持。 html { overflow-y: overlay; } 2、margin-right: calc(100% - 100vw) 100vw 相对于浏览器的 window.innerWidth ，是浏览器的内部宽度，注意， 滚动条宽度也计算在内 ！而 100% 是可用宽度，是不含滚动条的宽度。没有滚动条的时候，相当于margin-right:0，没什么影响；有滚动条的时候就相当于margin-right:

css 盒子模型1

由 爱⌒轻易说出口 提交于 2019-12-01 10:22:53
css盒子模型 CSS盒子模型 盒子模型解释 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下： 把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。 设置宽高 width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */ 设置边框 设置一边的边框，比如顶部边框，可以按如下设置： border-top-color:red; /* 设置顶部边框颜色为红色 */ border-top-width:10px; /* 设置顶部边框粗细为10px */ border-top-style:solid; /* 设置顶部边框的线性为实线，常用的有：solid(实线) dashed(虚线) dotted(点线); */ 上面三句可以简写成一句： border-top:10px solid red; 设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成

博客园CSS样式

由 我的梦境 提交于 2019-12-01 10:02:27
1.蓝色标题 如图示例： 插入页面定制CSS代码中： #cnblogs_post_body h3 { border-left: 5px solid #21759b; border-right: 5px solid #21759b; background: transparent url(http://images.cnblogs.com/cnblogs_com/Renyi-Fan/1188097/o_11.png) repeat scroll 0% 0%; /* background: linear-gradient(-30deg, rgb(241, 226, 198), rgb(242, 226, 198) 30%, rgb(243, 227, 198) 60%, rgb(244, 230, 189) 100%); */ border-radius: 6px 6px 6px 6px !important; font-size: 16px; font-weight: bold; height: 22px; line-height: 22px; padding: 5px 0 3px 15px; box-shadow: 0 0 0 1px #5F5A4B, 0px 0px 6px 0px rgba(10, 10, 0, 0.5); } #cnblogs_post_body h1 {

Web全栈-盒子box-sizing属性

由 谁说胖子不能爱 提交于 2019-12-01 10:01:41
<title>盒子box-sizing属性</title> <style> .content{ width: 300px; height: 300px; background-color: red; } .aside{ width: 100px; height: 200px; background-color: green; float: left; } .article{ /* 1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变 2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变 和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度 3.box-sizing取值 3.1content-box 元素的宽高 = 边框 + 内边距 + 内容宽高 3.2border-box 元素的宽高 = width/height的宽高 再复习下： 1.内容的宽度和高度 就是通过width/height属性设置的宽度和高度 2.元素的宽度和高度 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框 高度 同理可证 3.元素空间的宽度和高度 宽度 = 左外边距 +

Web全栈-盒模型-内边距属性

由 99封情书 提交于 2019-12-01 09:47:26
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内边距属性</title> <style> div{ width: 98px; height: 90px; border: 1px solid #000; background-color: red; } .box1{ padding-top: 20px; } .box2{ padding-right:40px; } .box3{ padding-bottom:80px; } .box4{ padding-left:160px; } .box5{ /*padding:20px 40px 80px 160px;*/ /*padding:20px 40px 80px;*/ /*padding:20px 40px;*/ padding:20px; } </style> </head> <body> <!-- 1.什么是内边距? 边框和内容之间的距离就是内边距 2.格式 2.1非连写 padding-top: ; padding-right: ; padding-bottom: ; padding-left: ; 2.2连写 padding: 上 右 下 左; 2.这三个属性的取值省略时的规律 2.1上 右 下 左 > 上 右 下 >

Qt编写自定义控件70-扁平化flatui

由 耗尽温柔 提交于 2019-12-01 09:35:00
一、前言 对于现在做前端开发人员来说，FlatUI肯定不陌生，最近几年扁平化的设计越来越流行，大概由于现在PC端和移动端的设备的分辨率越来越高，扁平化反而看起来更让人愉悦，而通过渐变色产生的质感色彩反而没有扁平化来得亲切。 Flat UI是基于Bootstrap之上进行二次开发的扁平化前端框架，他提供了动感、时尚的风格色调搭配，简洁、炫丽的功能组件，同时还提供了更为平滑的js交互动画，可以称得上前端扁平化设计框架的优秀代表之一。 既然是扁平化设计框架的优秀代表，当然需要在自己项目中应用应用，本人最早使用VB开发，而后转为C#开发，最后转为Qt开发，都是因为公司项目需要，根据需要不断学习新的编程框架，语言都是相通的，举一反三，以前用C#写的vista时钟控件和vista日历控件，稍微改改就转移成了Qt写的对应控件，非常方便，只要掌握了思想，熟练了一门语言和框架之后，其他的学起来特别快。 Qt中的qss机制，和css极为相似，感觉就是脱胎于css，用qss来实现Qt界面样式不是一般的方便，而是相当的爽，在看到FlatUI这样的精美的扁平化设计样式后，难以抑制手痒痒，就想用qss实现类似的风格。 开源地址： https://gitee.com/feiyangqingyun/QWidgetDemo https://github.com/feiyangqingyun/QWidgetDemo

TextBox String/Text's Padding For Custom Control

由 拟墨画扇 提交于 2019-12-01 09:21:42
I'm a newbie, and recently I've asked this question , where it taught me to have my best option for TextBox's bottom border, that prevents flickering/tearing - resulted by drawn graphics. Now my problem is how to have margin/paddings for the text/string inside the textbox, here's the code: using System.Drawing; using System.Windows.Forms; namespace main.Classes.CustomControls { class TextBoxMaterial : TextBox { public TextBoxMaterial() { this.BorderStyle = System.Windows.Forms.BorderStyle.None; this.Controls.Add(new Label() { Height = 2, Dock = DockStyle.Bottom, BackColor = Color.Gray, }); } }

day1-css练习[新浪首页顶部栏]

由 ∥☆過路亽．° 提交于 2019-12-01 09:09:08
直接贴代码吧： html代码 <div class="border-01"> <div class="border-001"> <ul class="weibo-left"> <li><a href="#">设置为首页</a></li> <li><a href="#">手机新浪网</a></li> <li><a href="#">移动客户端</a></li> </ul> <ul class="weibo-right"> <li><a href="#">登录</a></li> <li class="weibo"> <a href="#">微博</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> <li><a href="#">博客</a></li> <li><a href="#">邮箱</a></li> <li><a href="#">网站导航</a></li> </ul> </div> css代码： body,div{ margin: 0; padding: 0; font-family:"Microsoft YaHei","微软雅黑","SimSun","宋体"; } ul,li{ list-style: none;
订阅 padding