css样式属性有哪些-创新互联

小编给大家分享一下css样式属性有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

十年的临海网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整临海建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“临海网站设计”,“临海网站推广”以来，每个客户项目都认真落实执行。

1. vertical-align

CSS 的属性vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

baseline: 使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如</code> ，这意味着这些元素使用此值的表现因浏览器而异。</p><p><strong>sub：</strong>使元素的基线与父元素的下标基线对齐。</p><p><strong>super：</strong>使元素的基线与父元素的上标基线对齐。</p><p><strong>text-top：</strong>使元素的基线与父元素的上标基线对齐。</p><p><strong>text-bottom：</strong>使元素的底部与父元素的字体底部对齐。</p><p><strong>middle：</strong>使元素的中部与父元素的基线加上父元素<code>x-height</code>（译注：x高度）的一半对齐。</p><p><img src="/upload/otherpic35/1987.jpg" alt="css样式属性有哪些"></p><p><strong>注意<code>vertical-align</code> 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。</strong></p><blockquote><p>资源：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align</p></blockquote><h3>2. writing-mode</h3><p><code> writing-mode</code> 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置书时，应在根元素上设置它（对于 HTML 文档应该在 html 元素上设置）。它采用以下值之一<code>horizontal-tb (default) | vertical-rl | vertical-lr</code>。</p><p><img src="/upload/otherpic35/1988.jpg" alt="css样式属性有哪些"></p><p><strong>horizontal-tb：</strong>对于左对齐(ltr)脚本，内容从左到右水平流动。对于右对齐(rtr)脚本，内容从右到左水平流动。下一水平行位于上一行下方。</p><p><strong>vertical-rl：</strong>对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行右侧。</p><p><strong>vertical-lr：</strong>对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行左侧。</p><blockquote><p>资源：https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode</p></blockquote><h3>3. font-variant-numeric</h3><p><code>font-variant-numeric</code> CSS属性控制数字，分数和序号标记的替代字形的使用。</p><p>它采用以下这些值之一：<code>normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions</code>。</p><p>此属性对于设置数字样式很有用。根据情况，你可能希望显示老式的数字或带有斜杠的零，对于这些情况，<code>font-feature-settings</code>很有用。</p><p><img src="https://segmentfault.com/img/bVbGsio" alt="css样式属性有哪些"></p><blockquote>请注意，<code>font-variant-numeric</code>是<code>font-feature-settings</code>组属性的一部分。诸如<code>font-variant-caps</code>或<code>font-variant-ligatures</code>之类的属性也属于该组。<br/>还要注意，像所有<code>font-feature-settings</code>属性一样，你的字体需要实现上述功能才能正常工作。我使用的字体是<code>Fira Sans</code>。</blockquote><blockquote><p>资源：https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric</p></blockquote><h3>4. user-select</h3><p>每当我们有不想让用户选择的文本，或者相反，如果发生了双击或上下文单击，希望选择所有文本时，<code>user-select</code>属性将非常有用。</p><p>此属性采用以下值之一：<code>none | auto | text | all</code>。</p><p><strong>none：</strong>元素及其子元素的文本不可选中。请注意这个<code>Selection</code> 对象可以包含这些元素。从Firefox 21开始，<code>none</code> 表现的像<code>-moz-none</code>，因此可以使用<code>-moz-user-select: text</code> 在子元素上重新启用选择。</p><p><strong>auto</strong><br/><code>auto</code> 的具体取值取决于一系列条件，具体如下：</p><ul><li>在<code>::before</code> 和<code>::after</code> 伪元素上，采用的属性值是<code>none</code></li><li>如果元素是可编辑元素，则采用的属性值是<code>contain</code></li><li>否则，如果此元素的父元素的<code>user-select</code> 采用的属性值为<code>all</code>，则该元素采用的属性值也为<code>all</code></li><li>否则，如果此元素的父元素的<code>user-select</code> 采用的属性值为<code> none</code>，则该元素采用的属性值也为<code>none</code></li><li>否则，采用的属性值为<code> text</code></li></ul><p><strong>text：</strong>用户可以选择文本。<br/><strong>all：</strong>在一个HTML编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。</p><p><img src="https://segmentfault.com/img/bVbGsqr" alt="css样式属性有哪些"></p><blockquote><p>资源：https://developer.mozilla.org/en-US/docs/Web/CSS/user-select</p></blockquote><h3>5. clip-path</h3><p><code>clip-path</code> CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如<code>circle()</code>。<code>clip-path</code>属性代替了现在已经弃用的剪切<code>clip</code>属性。</p><p>此属性采用以下值之一:<code>circle() | ellipse() | polygon() | path() | url()</code>。</p><p>由于这是对该属性的介绍，因此，这里不会深入研究每个值。</p><p>我使用最多的两个值是<code>circle</code>和<code>polygon</code>。<code>circle(radius at pair)</code>值有两个参数，第一个参数是圆的半径，第二个参数是表示圆心的点。<code>polygon(pair, pair, pair ...)</code>值取3个或更多的点，表示一个三角形、一个矩形等等。</p><p><img src="/upload/otherpic35/1989.jpg" alt="css样式属性有哪些"></p><h3>6. shape-outside</h3><p><code>shape-outside</code>的CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边距框;<code>shape-outside</code>提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。它采用与<code>clip-path</code>相同的值。</p><p><code>clip-path</code>定义用户如何查看元素，<code>shape-outside</code>定义其他HTML元素如何查看元素。</p><p><img src="/upload/otherpic35/1990.jpg" alt="css样式属性有哪些"></p><blockquote><p>资源：https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside</p></blockquote><h3>7. background-clip</h3><p>最后，<code>backgroundclip</code> CSS属性设置元素的背景是否扩展到其<code>border</code> 、<code>padding</code> 或<code>content</code> 框之下。</p><p>此属性采用以下值之一：<code>border-box (default) | padding-box | content-box | text</code></p><h3>总结</h3><p>下图是结合上面 7 个属性实现的布局，让大家加深一下印象。</p><p><img src="/upload/otherpic35/1991.jpg" alt="css样式属性有哪些"></p><p>以上是css样式属性有哪些的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！</p> <br> 本文名称：css样式属性有哪些-创新互联 <br> 标题链接：<a href="http://lszwz.com/article/dsjdgg.html">http://lszwz.com/article/dsjdgg.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dcojihs.html">域名怎么管理才安全域名管理权</a> </li><li> <a href="/article/dcojigj.html">腾讯云服务器实例配置升级腾讯云服务器环境搭建</a> </li><li> <a href="/article/dcojiis.html">sap操作系统最新的简单介绍</a> </li><li> <a href="/article/dcojihd.html">go语言web服务器并发 go语言高并发与微服务实战</a> </li><li> <a href="/article/dcojiho.html">腾讯云sll安装到服务器腾讯云安装2008</a> </li> </ul> </div> </div> <div class="f_service_con"> <div class="h_fumin"> <div class="h_fumin_lei"> <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service01.png"></div> <p>售后响应及时</p><span>7×24小时客服热线</span> </div> <div class="h_fumin_lei"> <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service02.png"></div> <p>数据备份</p><span>更安全、更高效、更稳定</span> </div> <div class="h_fumin_lei"> <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service03.png"></div> <p>价格公道精准</p><span>项目经理精准报价不弄虚作假</span> </div> <div class="h_fumin_lei"> <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service04.png"></div> <p>合作无风险</p><span>重合同讲信誉，无效全额退款</span> </div> </div> </div> <div class="footerbar"> <div class="footer-t"> <div class="f-box"> <div class="f-1"> <div class="f-t"> <h2>联系我们</h2> <span>TEL</span> </div> <div class="f-b"> <h1><a href="tel:13518219792" rel="nofollow">135-1821-9792</a></h1> <h1><a href="tel:028-86922220" rel="nofollow">028-86922220</a></h1> <p>地址：乐山市太升南路288号锦天国际</p> </div> </div> <div class="f-2"> <div class="f-t"> <h2>快捷导航</h2> <span>Shortcut</span> </div> <div class="f-b"> <ul > </ul> <ul > <li><a href="/jianshe" title="乐山网站建设">乐山网站建设</a></li> <li><a href="/jianshe#ym_websiteBox2" title="品牌网站建设">品牌网站建设</a></li> <li><a href="/jianshe#ym_websiteBox1" title="企业网站建设">企业网站建设</a></li> <li><a href="/jianshe#ym_websiteBox4" title="集团网站建设">集团网站建设</a></li> <li><a href="/jianshe#ym_websiteBox4_2" title="外贸网站建设">外贸网站建设</a></li> <li><a href="/jianshe#ym_websiteBox4_5" title="企业宣传视频">企业宣传视频</a></li> </ul> <ul > <li><a href="/weixin" title="微信开发">微信开发</a></li> <li><a href="/weixin#item1" title="公众号开发">公众号开发</a></li> <li><a href="/weixin#item2" title="微商城建设">微商城建设</a></li> <li><a href="/weixin#item3" title="微官网建设">微官网建设</a></li> <li><a href="/weixin#item4" title="小程序开发">小程序开发</a></li> </ul> <ul> <li><a href="/case/" title="网站作品案例">网站作品案例</a></li> <li><a href="/case/" title="品牌网站案例">品牌网站案例</a></li> <li><a href="/case/" title="集团网站案例">集团网站案例</a></li> <li><a href="/case/" title="企业网站案例">企业网站案例</a></li> <li><a href="/case/" title="外贸网站案例">外贸网站案例</a></li> <li><a href="/case/" title="营销网站案例">营销网站案例</a></li> </ul> <ul style="margin:0;"> <li><a href="/about/">小谭建站</a></li> <li><a href="/about/">公司简介</a></li> <li><a href="/about#ab_item3">企业文化</a></li> <li><a href="/contact">联系我们</a></li> <li><a href="/Pay.html">付款方式</a></li> <li><a href="/jianshe#ym_websiteBox8">售后服务</a></li> </ul> <div style="clear:both;"></div> </div> </div> <div class="f-3"> <div class="f-t"> <h2>二维码</h2> <span>QR CODE</span> </div> <div class="f-b"> <ul> <li><img src="/Public/Home/images/fewm.png"> <p>微信公众号</p> </li> <li style="margin: 0"><img src="/Public/Home/images/fewm2.png"> <p>手机端网站</p> </li> <div style="clear:both;"></div> </ul> </div> </div> <div style="clear:both;"></div> </div> </div> <div class="footer-about"> <div class="w1200">乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，<a href="/" target="_blank">乐山网站建设</a>，<a href="/jianshe" target="_blank">乐山网站设计</a>，<a href="/jianshe" target="_blank">乐山网页设计</a>，<a href="/jianshe" target="_blank">乐山网站制作</a>，<a href="/jianshe#ym_websiteBox2" target="_blank">品牌网站建设</a>，<a href="/jianshe#ym_websiteBox3" target="_blank">营销网站建设</a>，<a href="/jianshe#ym_websiteBox4" target="_blank">集团网站建设</a>，<a href="/jianshe#ym_websiteBox1" target="_blank">企业网站建设</a>，<a href="/jianshe#ym_websiteBox4_2" target="_blank">外贸网站建设</a>，<a href="/jianshe#ym_websiteBox4_3" target="_blank">响应式网站建设</a>，<a href="/weixin#item4" target="_blank">小程序开发</a>，<a href="/weixin" target="_blank">微信开发</a>，<a href="/jianshe#ym_websiteBox4_4" target="_blank">企业形象设计</a>，<a href="/jianshe#ym_websiteBox4_5" target="_blank">企业宣传视频</a>等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。 </div> <div class="friend-links"> <h6 class="clearfix"> <span class="tilte">友情链接</span> <a class="exchagne" href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes">交换友情链接</a> </h6> <div class="link-list clearfix"> <div class="link-slider"> <a href="http://www.cxjianzhan.com/" title="成都做网站" target="_blank">成都做网站</a> <a href="https://www.cdcxhl.com/hangyead/" title="一元广告" target="_blank">一元广告</a> <a href="http://www.cdhuace.com/faguangzi/bfg.html" title="背发光字" target="_blank">背发光字</a> <a href="https://www.cdxwcx.com/city/deyang/" title="德阳网站建设" target="_blank">德阳网站建设</a> <a href="http://seo.cdkjz.cn/wangzhan/" title="网站推广公司" target="_blank">网站推广公司</a> <a href="https://www.cdxwcx.com/jifang/wenjiang.html" title="温江服务器托管" target="_blank">温江服务器托管</a> <a href="http://chengdu.xwcx.net/mobile/" title="移动手机网站制作" target="_blank">移动手机网站制作</a> <a href="http://www.huixingan.com/" title="广安园林景观设计" target="_blank">广安园林景观设计</a> <a href="http://www.ncjierui.cn/" title="彭山网站制作" target="_blank">彭山网站制作</a> <a href="http://www.mswzjz.com/" title="恒温恒湿空调机组" target="_blank">恒温恒湿空调机组</a> </div> </div> </div> </div> <div class="footer-b"> <div class="f-box"> <ul> <li><a href="/jianshe#ym_websiteBox6" target="_blank">服务流程</a></li> <li><a href="/jianshe#ym_websiteBox8" target="_blank">售后服务</a></li> <li><a href="/about/" target="_blank">联系我们</a></li> <li><a href="#" target="_blank">付款方式</a></li> <li><a href="#" target="_blank">网站地图</a></li> <li><a href="#" target="_blank">sitemap</a></li> <li> <p> <script data-cfasync="false" src="/Public/Home/js/email-decode.min.js"></script> </p> </li> <div style="clear:both;"></div> </ul> <p class="copy">Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室 All Rights Reserved <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2021004003号-25</a> <a style="display:none" target="_blank" href="###"><img style="vertical-align:middle" border="0" src="" width="65" height="25" /></a> </p> <div style="clear:both;"></div> </div> </div> <div class="sj_footer"> <div class="f-box"> <ul> <li><a href="/jianshe" target="_blank">网站建设</a></li> <li><a href="/jianshe#ym_websiteBox6" target="_blank">服务流程</a></li> <li><a href="/jianshe#ym_websiteBox8" target="_blank">售后服务</a></li> <li><a href="#" target="_blank">付款方式</a></li> <li><a href="/about/" target="_blank">关于我们</a></li> <li><a href="#" target="_blank">网站地图</a></li> <div style="clear:both;"></div> </ul> <p class="copy">Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室 </p> <p class="copy"> <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2021004003号-25</a> <a href="###" target="_blank"><img src="/Public/Home/images/govicon.gif" width="20" height="28" border="0" style="border-width:0px;border:hidden; border:none;"></a></p> <div style="clear:both;"></div> </div> </div> </div> <script type='text/javascript' src='/Public/Home/js/qqkefu.js'></script> <div class="qqkefu"> <ul> <li class="qq_czaa" id="130"><b class="a"></b>135-1821-9792</li> <li class="qq_czaa" id="130"><a href="tencent://message/?uin=1683211881"><b class="b"></b>业务咨询QQ</a></li> <li class="qq_czaa" id="130"><a href="javascript:showDiv()"><b class="f"></b>提交合作意向表</a></li> <li class="qq_czb"> <b class="c"></b> <div class="erweima"> <p><img src="/Public/Home/images/right_erweima.png"></p> </div> </li> <li class="top"><span></span></li> </ul> </div> <div id="popDiv" class="mydiv" style="display:none;"> <a class="mydiv_clk" href="javascript:closeDiv()">X</a> <div class="mydiv_list"> <div class="c_f_title"><span class="c_f_t">合作意向表</span></div> <div class="c_f_con"> <form id="form1" name="form1" class="mess_form" method="post" action="/post_order"> <input name='enews' type='hidden' value='AddFeedback'> <input name="bid" value="1" type="hidden"> <input type="hidden" name="ecmsfrom" value="9"> <input type="hidden" name='title' value="客户提交需求"> <li class="c_n"><span>公司名称</span> <dl><input name='gsname' id='gsname' type="text"></dl> </li> <li class="c_n"><span>邮箱</span> <dl><input name='gemail' id='gemail' type="text"></dl> </li> <li class="c_n xmm"> <div class="xmm_01"><span>姓名</span> <dl class="c_n_i"><input name='name' id='name' type="text"></dl> </div> <div class="xmm_01"><span style="text-align:center">电话</span> <dl class="c_n_i"><input name="tel" type="text"></dl> </div> </li> <li class="c_tser">您需要的服务</li> <li class="clearfix"> <dd><label><input type="radio" name='hobby' id='hobby' value="高端网站建设"><span>高端网站建设</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="我需要做微信营销"><span>我需要做微信营销</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="要找长期合作，需要年度服务"><span>要找长期合作，需要年度服务</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="我需要做购物商城"><span>我需要做购物商城</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="我需要网站改版"><span>我需要网站改版</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="其他"><span>其他</span></label></dd> </li> <li class="c_tser">您关注的地方</li> <li class="clearfix"> <dd><label><input type="radio" name='hobby2' id='hobby2' value="对功能要求比较高"><span>对功能要求比较高</span></label></dd> <dd><label><input type="radio" name='hobby2' id='hobby2' value="对设计创意要求比较高"><span>对设计创意要求比较高</span></label></dd> <dd><label><input type="radio" name='hobby2' id='hobby2' value="需要可以购物支付"><span>需要可以购物支付</span></label></dd> <dd><label><input type="radio" name='hobby2' id='hobby2' value="搜索引擎排名"><span>搜索引擎排名</span></label></dd> </li> <li class="c_tser">预算</li> <li class="clearfix clearfix2"> <dd><label><input type="radio" name='hobby3' id='hobby3' value="一万以内"><span>一万以内</span></label> </dd> <dd><label><input type="radio" name='hobby3' id='hobby3' value="1-3万"><span>1-3万</span></label> </dd> <dd><label><input type="radio" name='hobby3' id='hobby3' value="3-5万"><span>3-5万</span></label> </dd> <dd><label><input type="radio" name='hobby3' id='hobby3' value="5万以上"><span>5万以上</span></label> </dd> <dd><label><input type="radio" name='hobby3' id='hobby3' value="需招投标"><span>需招投标</span></label> </dd> </li> <li class="c_n" style="border-top:1px solid #eee; padding-top:10px"><span>验证码</span> <dl class="c_n_i yzmm"><input type="text" name='code' id='code' value=""></dl><span style="text-align:center"><img src="/Public/Home/images/1661eb19783442c38063791555cd0d80.gif" onclick="this.src=this.src + '?'" width="100" height="40"></span> </li> <li class="clearfix"> <dd class="submit"><input name='submit' type="submit" value="提交需求"></dd> </li> </form> </div> </div> </div> <div id="bg" class="bg" style="display:none;"></div> <div id='popIframe' class='popIframe' frameborder='0'></div> <script> //提交需求选项 $(document).ready(function (e) { $(".mess_form").submit(function () { if ($("#gsname").val() == "") { alert("请填写您的公司名称！"); $("#gsname").focus(); return false; } if ($("#gemail").val() == "") { alert("请填写您的邮箱"); $("#gemail").focus(); return false; } if ($("#name").val() == "") { alert("请填写您的姓名！"); $("#name").focus(); return false; } if ($("#tel").val() == "") { alert("请填写您的电话！"); $("#tel").focus(); return false; } if ($("#hobby").val() == "") { alert("请选择您需要的服务！"); $("#hobby").focus(); return false; } if ($("#hobby2").val() == "") { alert("请选择您关注的地方！"); $("#hobby2").focus(); return false; } if ($("#hobby3").val() == "") { alert("请选择您的预算！"); $("#hobby3").focus(); return false; } if ($("#code").val() == "") { alert("请填写正确的验证码！"); $("#code").focus(); return false; } }); }); </script> <script language="javascript" type="text/javascript"> //提交需求窗口 function showDiv() { document.getElementById('popDiv').style.display = 'block'; document.getElementById('popIframe').style.display = 'block'; document.getElementById('bg').style.display = 'block'; } function closeDiv() { document.getElementById('popDiv').style.display = 'none'; document.getElementById('bg').style.display = 'none'; document.getElementById('popIframe').style.display = 'none'; } </script> <script type="text/javascript" src="/Public/Home/js/scrolltopcontrol.js"></script> <script type="text/javascript" src="/Public/Home/js/su_new.js"></script> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>